我使用以下定义(改编自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,1,0 */
.content:hover {color: yellow;} /* a=0 b=0 c=2 d=0 -> 0,2,0 */
li {color: orange;} /* a=0 b=0 c=0 d=1 -> 0,1 */
li:first-line {color: pink;} /* a=0 b=0 c=0 d=2 -> 0,2 */
和以下的HTML
<li class="content">The first line</li>
当我在浏览器中打开它时,文本行是粉红色的.我以为它会是绿色的,在悬停时,它会是黄色的.我认为元素和伪元素(计算中的d)比类和伪类(计算中的c)具有更小的权重.
解决方法
您对特异性的理解是完全正确的.伪类和类在特异性上彼此相等,并且它们都比伪元素和元素(它们也彼此相等)排名更高.根据您已链接的规范,这是
explained pretty clearly.
那么为什么你在li中设置的规则：first-line优先于你在.content中设置的规则：hover,如果后者更具体？
因为,从CSS的角度来看,伪元素是元素.这意味着你有一个li：first-line元素 – 如果你没有样式它 – 将继承颜色：绿色或颜色：黄色来自.content和.content：悬停规则.但是直接定位元素的规则总是优先于继承的规则,而你的：第一行选择器定位你的li中的伪元素. ：第一行规则胜利只是因为它们没有被继承,而.content和.content：hover选择器的规则被继承(由li中包含的伪元素).特异性规则是红鲱鱼;他们甚至没有发挥作用.
