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

【问题标题】：CSS Universal selector (*) specificityCSS 通用选择器 (*) 特异性
【发布时间】：2019-05-14 21:47:21
【问题描述】：

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

*.x 不应该具有 0-0-1-1（1 个类，1 个标签）的特性，而 .x 只是一个类 0-0-1-0？

考虑以下基本代码：

*.x { color: blue; }

.x { color: red }

&lt;p class="x"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nam.&lt;/p&gt;

它应该是蓝色的。为了演示预期的行为，我将* 替换为另一个元素（p）：

p.x { color: blue; }

.x { color: red }

&lt;p class="x"&gt;This time it works.&lt;/p&gt;

【问题讨论】：

【解决方案1】：

universal selector (*) 对特异性没有影响，因此将应用后一个选择器的样式。

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

【讨论】：

【解决方案2】：

这是意料之中的。 W3C 规范说，

" 给定元素的选择器特异性计算如下：

注意最后一个项目符号。

【讨论】：