关于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继承过去的色彩属性的。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理