CSS специфичность приоритет

Question

Я получаю красный цвет фона для обоих h1. Для первого h1 идентификатор имеет наивысший приоритет, а для второго h1 встроенный имеет наивысший приоритет. Зачем?

#myid      { background-color: pink; }
.main h1   { background-color: red; }
div h1     { background-color: blue; }
h1         { background-color: green; }

<!-- the background-color expected 
     to be pink for the following h1 -->
<div class="main" id="myid"> 
    <h1>This is paragraph one!</h1>
</div>
        
<!-- the background-color expected 
     to be brown for the following h1 -->
<div style="background-color:brown;" class="main" > 
    <h1>This is paragraph two!</h1>
</div>

Answer 1

Оба они имеют отношение к тому, применяется ли стиль непосредственно к элементу или к родительскому элементу.

В обоих случаях ваша интуиция верна для внешнего элемента div.main.Однако существуют правила, которые применяются к h1 s, которые, хотя и менее конкретны, применяются непосредственно к h1 s, поэтому они имеют приоритет над более конкретными правилами, которые применяются к div s.

Стили для элемента с прямым таргетингом всегда будут иметь приоритет над унаследованными стилями, независимо от специфики унаследованного правила.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Directly_targeted_elements_vs._inherited_styles

Answer 2

Присутствует розовый фон, но он скрыт красным фоном H1, расположенного сверху.

Если вы добавите некоторые отступы к стилям #myid, вы увидите розовый контур вокруг красного цвета H1

Answer 3

Вы применяете фон не к элементу h1, а к его родительскому элементу.Учитывая это, здесь нет никакой специфичности, потому что мы рассматриваем только правила, применяемые к h1, и, если нет правил, мы рассматриваем наследование (стили, применяемые к родительскому элементу, который наследуется дочерними элементами).Также background не является значением, которое наследуется по умолчанию, поэтому наследование здесь не будет применяться, даже если вы не укажете фон для h1.

Так что в этом случае красный всегда будет выигрывать, потому что онправило с самой высокой специфичностью применяется непосредственно к h1.