CSS Universal选择器(*)特异性

时间:2016-04-15 09:41:51

标签: css css-specificity

我想弄清楚为什么.x具有比*.x更高的特异性,而后者有望获胜。

*.x是否应该具有0-0-1-1(1个类,1个标签)的特异性,而.x只是一个类0-0-1-0

考虑以下基本代码:

*.x { color: blue; }

.x { color: red }
<p class="x">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nam.</p>

它应该是蓝色的。为了演示预期的行为,我将*替换为另一个元素(p):

p.x { color: blue; }

.x { color: red }
<p class="x">This time it works.</p>

2 个答案:

答案 0 :(得分:5)

universal selector*)对指定性没有影响,因此后一种选择器的样式将是应用的样式。

  

星号(*)是CSS的通用选择器。它匹配单个   任何类型的元素。用简单的选择器省略星号   同样的效果。例如,考虑* .warning和.warning   相等。

答案 1 :(得分:1)

这是预料之中的。 W3C规范说,

” 选择器对给定元素的特异性计算如下:

  • 计算选择器中ID选择器的数量(= A)
  • 计算类选择器,属性选择器和 选择器中的伪类(= B)
  • 计算类型选择器和伪元素的数量 选择器(= C)
  • 忽略通用选择器

注意最后一个项目符号。

参考:https://www.w3.org/TR/selectors/#specificity