Question

我非常了解CSS特异性规则（我已经浏览过此页面：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity），但是我有一个示例，其中两个元素的特异性不应该相等，但是CSS规则的应用却有所不同html元素的嵌套顺序。

h4 small {
  color: red;
}

<!-- will be red -->
<h4>
  <a href="www.example.com">
    <small>test</small> .
  </a>
</h4>

<!-- will be blue -->
<h4>
  <small>
       <a href="www.example.com">test</a>
    </small>
</h4>

转载于此：https://jsfiddle.net/u39zsmx1/

h4 small应该比a更具体，但是，当a元素是最内部的嵌套元素时，其样式将获胜。为什么？

Answer 1

HTML元素的嵌套顺序如何影响CSS特异性？

不是。

h4 small应该比a更具体，但是，当a元素是最内部的嵌套元素时，其样式将获胜。为什么？

h4 small与<small>元素匹配。它与<a>元素不匹配。仅当多个规则与 same 元素匹配时，特异性才重要。

a是蓝色的（或紫色的，取决于是否访问过）。这来自浏览器样式表中的CSS规则。

small是红色的。这来自作者样式表中的CSS规则。

文本节点是其子元素的颜色。

Answer 2

在进一步研究https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity之后，发现虽然不考虑排序，但重要的是要锁定哪些元素。

如果其中一个CSS规则直接针对某个元素而另一个不针对某个元素，则不计算特异性。在这种情况下不会应用继承。

HTML元素的嵌套顺序如何影响CSS的特异性？

2 个答案: