为何通用选择器(*)会覆盖body元素选择器的样式？

别担心，这个问题很常见，我来帮你理清楚～

你遇到的问题核心是CSS选择器的直接样式覆盖了继承样式：

• 你用了*通配符选择器（它会匹配页面上所有元素），并给它设置了color: black。这意味着<h2>、<p>这些元素自己的文本颜色被直接设为黑色了。
• 虽然你给<body>设置了color: red，但<h2>、<p>并不会继承这个红色——因为它们自己已经被*选择器赋予了明确的颜色值，继承的样式优先级低于直接作用在元素上的样式。

根据你的需求，有两种简单的修复方式：

方式一：移除通配符里的color设置（推荐） #

如果*选择器只是用来做全局重置（比如清除默认边距），把color: black从里面删掉就好，这样<body>的红色会自动继承给内部元素：

* {
  /* 保留你需要的全局样式，比如 margin: 0; padding: 0; */
}
body {
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5em;
  color: red;
}

方式二：明确指定body内元素的颜色 #

如果你确实需要保留*的color: black，可以通过提高选择器优先级，直接给<body>内的元素设置红色：

* {
  color: black;
}
body {
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5em;
}
body h2, body p {
  color: red;
}

这样修改后，页面上的文本就会显示你想要的红色啦～

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