关于css:星号选择器的优先级问题

先看看这样的一个 dom 构造

<div class="parent">
  <div class="child">
    Child Text
    <span class="text">Hello CSS</span>
  </div>
</div>

CSS 这样设置

* {color: red;}
.parent .child {color: green;}

那么，Hello CSS，会是什么色彩呢？

会是红色。能够间接点开这个 Demo 查看成果。

*和 .parent .child 都能对 Hello World 文字的色彩施加影响，而且 .parent .child 放在前面，也没有 * 的优先级高，所以显示了红色，而不是绿色。

星号选择器（*），示意抉择所有元素（MDN 链接）。在这个示例中，星号蕴含了对 .text 节点的色彩设置，其优先级，是高于从父节点 .child 继承过去的色彩属性的。