在下面的CSS中，主体选择器优先于通用选择器。
* {
color: rgba(255, 3, 3, 0.966);
}
body {
color: rgb(103, 231, 18);
font-family: sans-serif;
}
但是当我像这样加载简单的 HTML 时：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="style.css" rel="stylesheet" />
<title>BLOG</title>
</head>
<body>
<h2>BLOG</h2>
<a href="index.html">Back to home</a>
</body>
</html>
将应用通用选择器。这是为什么？
我清除了浏览器缓存，并在其他浏览器中尝试过，但没有成功。 当我指定如下所示的标签时，它可以正常工作
body h2,a {
color: rgb(103, 231, 18);
font-family: sans-serif;
}
通用选择器适用于所有元素，包括您正在使用的
h2abody通用选择器 (*) 具有最低的特异性 (0,0,0,0)。 类型选择器（例如 body、h2、a）具有更高的特异性 (0,0,0,1)。 当发生冲突时，具有较高特异性的规则优先。 在你的例子中：
* {
color: rgba(255, 3, 3, 0.966);
}
body {
color: rgb(103, 231, 18);
font-family: sans-serif;
}
* 选择器将所有元素的颜色设置为红色。
正文选择器仅覆盖标签的颜色并应用字体系列。
但是，颜色默认由 和 等子元素继承，除非显式覆盖。
为什么通用选择器似乎“获胜”
* 设置的颜色属性适用于所有元素，包括 和 。由于您尚未在正文规则中显式设置这些标签的颜色属性，因此它们从 * 规则而不是正文继承颜色。
为什么 body h2, a 有效？
当您明确定位 h2 和 a 时：
body h2, a {
color: rgb(103, 231, 18);
font-family: sans-serif;
}
该规则比*具有更高的特异性，因此它会覆盖指定元素的通用选择器。
为了确保子元素正确继承样式，您可以强制继承或显式定位它们。
强制继承 在主体选择器中使用颜色的继承值：
body {
color: rgb(103, 231, 18);
font-family: sans-serif;
}
body * {
color: inherit;
}
这使得 的所有子元素都继承其颜色。
或明确目标元素 如果您希望像 h2 和 a 这样的子元素与 body 具有相同的样式，您可以明确地定位它们：
body, body h2, body a {
color: rgb(103, 231, 18);
font-family: sans-serif;
}
为什么浏览器会有这样的行为
通用选择器适用于所有元素，而正文选择器仅适用于标签本身。由于颜色是继承的，并且不会为主体选择器中的子元素显式覆盖，因此通用选择器的规则对于这些元素仍然存在。