Question

鉴于以下CSS和HTML，有人可以解释为什么文章标签中的标题是红色的，我认为它应该是蓝色的，因为它们都具有相同的重量但是文章样式是在h4样式之后所以应该覆盖h4风格。

<html>
<head>
   <title></title>

   <style>
       h4
       {
            color:red;
       }

       article
       {
            color:blue;
       }
    </style>
</head>
<body>
    <article>
        <h4>Latest News</h4>
    </article>
</body>
</html>

Answer 1

特异性与此无关。在代码中，color元素上只有一个规则集h4，因此应用了该设置。

如果省略该规则，则h4将从其父级继承color。但是，当任何样式表为该元素的该属性设置值时，对于元素的属性，不会发生继承。即使在这里，特异性也不起作用。

Answer 2

更容易理解的方法：

<h4>比<article>更接近文字，两者都是元素选择器，因此<h4>会覆盖<article>。

Answer 3

由于文章的blue属性和H4 red属性之间存在冲突，因此Web浏览器将始终选择“最近”属性。
因此，在这种情况下，由于文本在H4内部具有红色属性，因此它将以红色显示文本，但如果您在H4标记之外但在文章标记内添加一些其他文本，则文本将为蓝色。

对CSS特异性感到困惑

3 个答案: