为何通配符* CSS选择器在示例中优先级更高？

编码时遇到意外：即便存在更高特异性的CSS规则，无特异性的全局选择器规则仍被应用。原本预期：

• Text1为蓝色
• Text2为蓝色
  但实际Text1被渲染为绿色。

示例代码 #

CSS代码

* {
  color: green;
}

.blue-text {
  color: blue;
}

HTML代码

<div class="blue-text">
  <div>
    Text1 <!-- Why is this not blue? -->
  </div>
  Text2
</div>

原因解析 #

核心在于CSS继承机制与样式优先级的底层规则：

• .blue-text选择器仅作用于拥有该类的外层<div>，它设置的color: blue会被内部元素继承，但继承来的样式优先级极低，低于任何直接应用在元素上的样式。
• *是全局选择器，会直接选中页面上所有元素（包括内部的那个<div>），并直接为其设置color: green。哪怕这个选择器的特异性为0，只要是直接作用在目标元素上的样式，优先级就高于从父元素继承来的样式。

因此内部<div>的文字被全局选择器直接设置的绿色覆盖，而外层<div>的文字（Text2）没有被其他直接样式覆盖，所以显示.blue-text定义的蓝色。

内容的提问来源于stack exchange，提问作者Draex_