类/伪类与元素/伪元素之间的CSS特异性级别是如何工作的？

Question

我使用以下定义（改编自CSS2规范http://www.w3.org/TR/CSS21/cascade.html#specificity）：

• a = 在元素上使用style属性
• b = id属性的数量
• c = 属性（类）和伪类的数量（:link、:hover）
• d = 元素和伪元素的数量（:first-line，:first-letter）

使用以下样式（我的计算结果在右侧）：

.content          {color: green;}   /* a=0 b=0 c=1 d=0 -> 0,0,1,0 */
.content:hover    {color: yellow;}  /* a=0 b=0 c=2 d=0 -> 0,0,2,0 */
li                {color: orange;}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
li:first-line     {color: pink;}    /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */

并且以下是HTML代码

<li class="content">The first line</li>

在浏览器中打开后，这行文字是粉色的，我以为它应该是绿色的，悬停时变成黄色的。我认为元素和伪元素（计算中的“d”）比类和伪类（计算中的“c”）权重小。

- user215997

---

可能是CSS中:first-line和:first-child的具体性？的重复问题。 - Mark Amery

Answer 1

您对特异性的理解完全正确。伪类和类在特异性上相等，两者都高于伪元素和元素（它们也相等）。这在您已经链接到的规范中被解释得很清楚。

那么为什么您在.content:hover中设置的规则比后者更具体，但li:first-line中设置的规则优先于其？

因为从CSS的角度来看，伪元素是元素。这意味着您有一个li:first-line元素，如果您没有对其进行样式设置，则会从.content和.content:hover规则继承color: green或color: yellow。但是直接针对元素的规则始终优先于继承规则，并且您的:first-line选择器正在定位您li中的伪元素。:first-line规则胜出，仅仅因为它们不是继承的，而.content和.content:hover选择器的规则是继承的（由包含在li中的伪元素继承）。特异性规则是一个误导人的问题；它们甚至没有发挥作用。

- Mark Amery

Answer 2

我猜 :first-line 比仅仅使用 .content 更具体。所以文本的第一行是粉色的，但列表的符号是绿色的（悬停时为黄色）。对我来说一切都很好。

想象一下 :first-line 选择器就像一个嵌套的文本节点选择器：

<li class="content">
     <text:text>The first line</text:text><br />
     The second line
</li>

它作用于嵌套元素，因此比任何其他选择器都更重要。

- Daniel O'Hara

---

-1；这是不正确的。OP对规范的分析是正确的；:first-line并不比.content更具体。：first-line优先级较高的原因是直接应用的样式优先于继承的样式；特异性是无关紧要的。 - Mark Amery

刚才匆忙阅读了一遍，现在再仔细看，发现你第一个段落之后的所有内容都说得非常准确；只是你的第一个段落完全错了。如果没有第一个段落，这将是一个好答案。 - Mark Amery