CSS 特异性计算和浏览器中的错误行为

Question

根据我对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>

Answer 1

您不能将 <h1> 标签放在 <p> 标签内。浏览器知道这一点并纠正它；如果您使用此代码检查页面的降价，您会看到浏览器在 <h1> 标签打开之前自动关闭 <p> 标签。所以浏览器实际上将您的代码呈现为：

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

因此，这意味着您的 <h1> 实际上不是 <p> 的后代。因此，您选择的 body#contact div p h1 不会影响任何内容。

有关 <p> 元素内允许的元素的列表，请参阅 Mozilla Developer Network。

CSS specificity calculation and incorrect behavior in browsers