Расчет специфичности CSS и некорректное поведение в браузерах

Согласно моему пониманию расчетов специфичности CSS, цвет h1 ниже должен быть красным, но браузеры показывают его синим шрифтом. Есть идеи, что мне не хватает?

#contact h1 {color:blue;}         /* specificity: 0101 */
body#contact div p h1 {color:red;}  /* specificity: 0104 */
<body id="contact">
    <div>
        <p>
            <h1>Example</h1>
        </p>
    </div>
</body>

Источник

1 ответ

Решение

Вы не можете положить <h1> тег внутри <p> тег. Браузеры знают это и исправляют это; если вы проверите уценку страницы с помощью этого кода, вы увидите, что браузер автоматически закрывает <p> тег перед <h1> тег открыт. Таким образом, браузер фактически представляет ваш код как:

<body id="contact">
    <div>
        <p></p>
        <h1>Example</h1>
        <p></p>
    </div>
</body>

И из-за этого это означает, что ваш <h1> на самом деле не является потомком <p>, Поэтому ваш селектор body#contact div p h1 ни на что не влияет.

См. Mozilla Developer Network для получения списка того, какие элементы разрешены внутри <p> элементы.

Источник
Другие вопросы по тегам