Таргетинг itemprop в CSS

Question

Используя приведенный ниже код custom.css, я успешно перезаписываю файлы css коммерческого шаблона Joomla 3.

div[itemprop="articleBody"] h1, h2, h3, h4, h5, h6 {
     margin-top: 18px!important;
     margin-bottom: 0px!important;
}

Файл custom.css должен применяться к:

<div itemprop="articleBody">
   <h1><strong>Some Text</strong></h1>
   <p> Some Text Some Text Some Text Some Text </p>
</div>

Проблема в том, что код custom.css применяется даже к тегам h вне контейнера <div itemprop="articleBody"> во всех основных браузерах.

В чем может быть проблема?

Answer 1

Путем записи

div[itemprop="articleBody"] h1, h2, h3, h4, h5, h6 {
 margin-top: 18px!important;
 margin-bottom: 0px!important;
}

Сначала вы устанавливаете стили на h1, который находится внутри div с помощью itemprop, но затем вы добавляете стили ко всем h2,h3,h4,h5,h6, которые находятся на всей странице.

Итак, проблема в том, что вы не пишете CSS-селекторы должным образом.Вам необходимо добавить родительский селектор для каждого заголовка, например

div[itemprop="articleBody"] h1,
div[itemprop="articleBody"] h2,
div[itemprop="articleBody"] h3{
    /*styles*/
}

ИЛИ, если вы используете препроцессор CSS, такой как SASS или LESS

div[itemprop="articleBody"] {
   h1 { }
   h2 { }
   h3 { }
   ...
 }

Answer 2

На самом первом этапе вы должны поместить тег h1, h2, h3, h4, h5, h6 внутри элемента div.в противном случае, если вы просто поместите тег h1, h2 и напишите какой-нибудь css без элемента div, он переопределит все css.поэтому вы должны использовать родительский селектор т.е. элемент div

div[itemprop="articleBody"] h1, div[itemprop="articleBody"] h2, div[itemprop="articleBody"] h3, div[itemprop="articleBody"] h4, div[itemprop="articleBody"] h5, div[itemprop="articleBody"] h6 {
 margin-top: 18px!important;
 margin-bottom: 0px!important;
}

<div itemprop="articleBody">
   <h1><strong>Some Text</strong></h1>
   <p> Some Text Some Text Some Text Some Text </p>
</div>

Answer 3

Вы должны выбрать атрибут itemprop для каждого определения заголовка.Перепишите определение стиля следующим образом

div[itemprop="articleBody"] h1, div[itemprop="articleBody"] h2, 
div[itemprop="articleBody"] h3, div[itemprop="articleBody"] h4, 
div[itemprop="articleBody"] h5, div[itemprop="articleBody"] h6 {
     margin-top: 18px!important;
     margin-bottom: 0px!important;
}