为什么 * CSS 选择器在一个简单的示例中获得优先权

Question

今天编码时，我遇到了一个惊喜 - 即使存在具有更高特异性的规则，也使用了没有特异性的元素 CSS 规则。

在下面的例子中，我期望：

• Text1 是蓝色的
• Text2 是蓝色的

实际上，Text1 呈现为绿色。

有人可以解释一下让 Text1 变成绿色的 CSS 算法吗？

* {
  color: green;
}

.blue-text {
  color: blue;
}

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

Answer 1

*

选择器将 div 与其中的文本进行匹配（将

color

值从默认 (

inherit

) 更改为

green

。

.blue-text

选择器不将div与其中的文本匹配。