Спецификация унаследованных свойств CSS

Question

Каков уровень специфичности CSS, полученный унаследованными свойствами? Я прочитал рекомендацию W3 относительно специфичности CSS, и поэтому я понимаю, как вычислить различные особенности правил CSS, которые непосредственно нацелены на один и тот же элемент, но я не вижу упоминания об уровне специфичности, заданной для унаследованных атрибутов.

В частности, проблема, с которой я сталкиваюсь, связана с элементами заголовка, хотя мне было бы очень интересно понять это в целом.

Например, вот фрагмент HTML:

<h2>This should be black</h2> 
<div class="all_red_text"> 
    <h2>This should be red</h2> 
</div> 

Теперь, если я включать некоторые CSS, как это:

.all_red_text { color: red; } 

я получить результат я ожидаю. С другой стороны, если я CSS-код, который я включил был

h2 { color: black; } 
.all_red_text { color: red; } 

затем все текст будет черным. В первом случае существует некоторый браузер CSS по умолчанию, который может быть переопределен унаследованным свойством, но тогда, когда одно и то же свойство указано вручную, во втором примере оно имеет приоритет над унаследованным свойством.

Answer 1

Любое объявление, которое соответствует элементу напрямую, получит приоритет над свойством, которое унаследовано от родителя элемента. Специфика не имеет к этому никакого отношения.

Answer 2

CSS применяется к элементам в этой форме:

Priority 1: inline styles 
Priority 2: CSS ID styles 
Priority 3: CSS class/pseudo-class styles 
Priority 4: CSS element styles 
Priority 5: Inherited styles 

Таким образом, используя ваш HTML структура & CSS

<h2>This should be black (and is black)</h2> 
<div class="all_red_text"> 
    (This text is indeed red.) 
    <h2>This should be red (actually, it's parent is red - this text is black)</h2> 
</div> 

h2 { color: black; } 
.all_red_text { color: red; } 

.all_red_text CSS говорит о div.all_red_text элемент и все внутри него, чтобы иметь красный текст. CSS h2 сообщает h2 элементам, чтобы иметь черный текст. Когда отображается h2, он видит, что «мой родительский элемент хочет, чтобы у меня был красный текст, но мне прямо говорят, что у него черный текст». Такая же идея относится и к родителям, в том числе к настройкам по умолчанию для HTML и браузера. Это позволяет, например, установить font-family на элемент html и применить его ко всему на вашей (хорошо отформатированной) веб-странице, если только что-то не отменяет Это.

Если вы хотите, чтобы h2 внутри div.all_ted_text также имел красный текст, вам нужно сообщить этим элементам h2, чтобы иметь красный текст; что-то вроде этого:

.all_red_text h2 { color: red; } 

CSS-Tricks has a pretty nice guide on this, хотя они в настоящее время не слишком глубоко в наследуемые свойства.

Answer 3

Специфика унаследованных свойств CSS не существует. Селекторы, а не свойства, имеют специфику.

В вашем примере оба элемента h2 соответствуют только одному из правил, h2 { color: black; }. Таким образом, цвет h2 является черным (при условии, что нет других таблиц стилей, которые влияют на рендеринг).Все, что установлено для некоторых других элементов (включая родительский элемент второго элемента h2), не влияет на это как минимум.

Если правило h2 { color: black; } отсутствует и нет других правил, влияющих на ситуацию, то на любом из элементов h2 нет цвета. В соответствии с определением свойства color значение затем наследуется от родителя.