类/伪类与元素/伪元素之间的CSS特异性级别如何工作? [英] How do CSS specificity levels between classes/pseudo-classes and elements/pseudo-elements work?

问题描述

我正在使用以下定义(根据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)的权重.

解决方案

您对特异性的理解是完全正确的.伪类和类的特异性彼此相等，并且它们的等级都高于伪元素和伪元素(它们也彼此相等).在已经链接到的规范中，很清楚地解释了. >

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

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

I'm using the following definitions (adapted from the CSS2 spec http://www.w3.org/TR/CSS21/cascade.html#specificity )

• a = using the style attribute on an element
• b = number of id attributes
• c = number of attributes (classes) and pseudo classes (:link, :hover)
• d = number of elements and pseudo-elements (:first-line, :first-letter)

With the following styles (my calculations to the right):

.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 */

and the following html

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

When I open it up in a browser, the line of text is pink. I thought it would be green and on hover, it would be yellow. I thought that elements and pseudo-elements (the d in the calculation) have less weight than classes and pseudo classes (the c in the calculations).

解决方案

Your understanding of specificity is completely correct. Pseudo-classes and classes are equal to each other in specificity, and both of them rank higher than pseudo-elements and elements (which are also equal to each other). This is explained pretty clearly at the spec you already linked to.

So why do the rules you set in li:first-line take precedence over the ones you set in .content:hover, if the latter is more specific?

Because, from CSS's perspective, pseudo-elements are elements. That means that you have a li:first-line element which - if you didn't style it - would inherit color: green or color: yellow from the .content and .content:hover rules. But rules that target an element directly always take precedence over inherited rules, and your :first-line selector is targeting a pseudo-element within your li. The :first-line rules win simply because they are not inherited and the rules from .content and .content:hover selectors are inherited (by the pseudo-element contained within the li). Specificity rules are a red herring; they don't even come into play.

这篇关于类/伪类与元素/伪元素之间的CSS特异性级别如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！