我试图弄清楚为什么.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>
通用选择器(*
)对说明符没有影响,因此后一个选择器的样式将是应用的样式。
星号(*)是CSS的通用选择器。它匹配单个任何类型的元素。用简单的选择器省略星号有同样的效果。例如,考虑*.warning和.warning相同的
这是意料之中的事。W3C规范说,
"对于给定元素,选择器的特异性计算如下:
- 计算选择器中ID选择器的数量(=A)
- 计算类选择器、属性选择器和选择器中的伪类(=B)
- 计算中的类型选择器和伪元素的数量选择器(=C)
- 忽略通用选择器
"
注意最后一个项目符号。
参考:https://www.w3.org/TR/selectors/#specificity