Priority issue with asterisk selector*

First look at such a dom structure

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

CSS is set like this

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

So, Hello CSS , what color will it be?

will be red. You can directly click on this Demo to see the effect.

* .parent .child Hello World文字的颜色施加影响， .parent .child ，也没有* has high priority, so it shows red instead of green.

Asterisk selector (*) to select all elements ( MDN link ). In this example, the asterisk contains the color setting for the .text node, which takes precedence over the color attribute inherited from the parent node .child .