CSS 通用选择器 (*) 特异性
CSS Universal selector (*) specificity
我想弄清楚为什么 .x 比 *.x 具有更高的特异性，而后者有望获胜。
*.x 不应该具有 0-0-1-1 的特性（1 class，1 个标签）而 .x 只是一个 class 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>
universal selector (*) 对特异性没有影响，因此后一个选择器的样式将被应用。
An asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has
the same effect. For instance, *.warning and .warning are considered
equal.
这是意料之中的事情。 W3C 规范说，
”
选择器的特异性针对给定元素计算如下：
- 统计选择器中ID选择器的个数(=A)
- 计算 class 选择器、属性选择器和
pseudo-classes 在选择器中 (= B)
- 计算类型选择器的数量，pseudo-elements
选择器 (= C)
- 忽略通用选择器
注意最后一个项目符号。
我想弄清楚为什么 .x 比 *.x 具有更高的特异性，而后者有望获胜。
*.x 不应该具有 0-0-1-1 的特性（1 class，1 个标签）而 .x 只是一个 class 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>
universal selector (*) 对特异性没有影响，因此后一个选择器的样式将被应用。
An asterisk (*) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect. For instance, *.warning and .warning are considered equal.
这是意料之中的事情。 W3C 规范说，
” 选择器的特异性针对给定元素计算如下：
- 统计选择器中ID选择器的个数(=A)
- 计算 class 选择器、属性选择器和 pseudo-classes 在选择器中 (= B)
- 计算类型选择器的数量，pseudo-elements 选择器 (= C)
- 忽略通用选择器
注意最后一个项目符号。