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>标记。浏览器知道并纠正它;如果您使用此代码检查网页的降价，您会看到浏览器在<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>元素中允许使用哪些元素的列表。