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

Question

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

• a =在元素上使用style属性
• b = id属性的数量
• c =属性(类)和伪类的数量(:link,:hover)
• d =元素和伪元素的数量(:第一行,:第一个字母)

使用以下样式(我的计算在右侧):

.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

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

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

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

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