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

Question

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

• a = 使用样式属性 元素
• 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）。

Answer 1

您对特异性的理解是完全正确的。伪类和类在特异性上是相等的，并且它们的排名都高于伪元素和元素（它们也彼此相等）。这是 explained pretty clearly 在您已经链接到的规范中。

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

因为从 CSS 的角度来看，伪元素是元素。这意味着您有一个 li:first-line 元素 - 如果您没有设置它的样式 - 将从 .content 和 .content:hover 规则继承 color: green 或 color: yellow。但是直接针对元素的规则总是优先于继承的规则，并且您的:first-line 选择器针对的是伪元素在您的li。 :first-line 规则之所以获胜，仅仅是因为它们没有被继承，而来自.content 和.content:hover 选择器的规则 被继承（通过包含在li 中的伪元素）。特异性规则是一条红鲱鱼；他们甚至没有发挥作用。

Answer 2

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

假设:first-line 选择器只是一个嵌套的文本节点选择器，例如：

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

它对嵌套元素进行操作，因此它比任何其他选择器都重要。