CSS通用选择器(*)特异性



我试图弄清楚为什么.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

最新更新