CSS通用选择器(*)优先级问题咨询

嘿，我来帮你把这个问题捋明白！你碰到的情况核心是CSS优先级规则在搞事情～

通配符*选择器是所有CSS选择器里优先级最低的，而像body、p这类元素选择器的优先级比它要高。当多个选择器都作用在同一个元素上时，优先级高的样式会直接覆盖优先级低的，这就是为啥你看不到*设置的灰色背景在p上生效，甚至body的灰色也被蓝色覆盖了。

先看你用到的代码：

* { background-color: grey; } 
body { background-color: blue; } 
p { background-color: red; }

<p>Lorem ipsum dolor sit amet...</p>

咱们拆解一下：

• 对于body元素：*先给它设了灰色背景，但紧接着body选择器的蓝色样式优先级更高，直接把灰色覆盖了，所以body最终显示蓝色。
• 对于p元素：同理，*的灰色背景被p选择器的红色完全覆盖，所以p显示红色。
• 你觉得“*的灰色仅作用于body”其实是个错觉——body的蓝色已经完全替代了*给它的灰色，你看到的蓝色就是body的样式，灰色根本没机会显示出来～

如果想让*的样式能生效，要么用!important强制提升优先级（但非常不推荐，会打乱样式体系），要么去掉body和p的背景样式，或者用更具体的选择器组合来调整优先级。

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