Question

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

a =使用一个样式属性元素
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

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

那么为什么您在print(file.read()) file.seek(0, os.SEEK_SET) for line in file: ...中设置的规则优先于您在li:first-line中设置的规则，如果后者更具体？

因为从CSS的角度来看，伪元素是元素。这意味着您有一个.content:hover元素 - 如果您没有设置它的样式 - 将从{{1}继承 li:first-line或color: green }和color: yellow规则。但是直接定位元素的规则始终优先于继承的规则，而.content选择器的目标是 <{1}}中的伪元素。 .content:hover规则获胜只是因为它们没有被继承，:first-line和li选择器的规则被继承（由{{{}中包含的伪元素1}}）。特异性规则是红鲱鱼;他们甚至不会发挥作用。

Answer 2

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

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

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

它在嵌套元素上运行，因此它比任何其他选择器更重要。

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

2 个答案: