为什么我的通用选择器会覆盖我的元素选择器？ [复制]答案

【问题标题】：Why is my universal selector overriding my element selector? [duplicate]为什么我的通用选择器会覆盖我的元素选择器？ [复制]
【发布时间】：2020-11-09 23:42:41
【问题描述】：

如果有人问过这个问题，我很抱歉，但我不知道为什么会这样！文本显示为 black，尽管我已在正文选择器中将其设置为 red。我很感激帮助。（注意：同样的事情发生在 div 选择器上）

css:

* {
  color: black;
}

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

HTML：

 <body>
    <h2>Hi!</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus,
      reprehenderit expedita, non eveniet qui eos nostrum, tenetur odit
      perferendis praesentium voluptatem nobis rerum laborum. Nobis consequuntur
      reprehenderit id nesciunt exercitationem!
    </p>
  </body>

【问题讨论】：

因为在这种特定情况下* { ... }（基本上）相当于body, h2, p{ color: black }。你的段落不会继承你正文的颜色，因为你已经明确地给它color 属性。
非常感谢您的帮助，但通用选择器不应该具有最少的特异性吗？为什么它还会覆盖我的 div 选择器？
这不是具体问题。您的第二个区块针对的是body，并且只有body；您只是将一种样式应用于您的段落。如果您没有使用 * { } 由于继承而不是特殊性，您的段落将呈现颜色。

标签： css

【解决方案1】：

正文不直接包含任何文本。这就是为什么你看不到红色文字的原因。而* 适用于所有选择器，因此您只能看到黑色。

看看下面的代码，你会更明白。

*{
  color: black;
}

body {
  color: green;
}

p {
  color: red;
}

<body>
   Body text
    <h2>Hi!</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus,
      reprehenderit expedita, non eveniet qui eos nostrum, tenetur odit
      perferendis praesentium voluptatem nobis rerum laborum. Nobis consequuntur
      reprehenderit id nesciunt exercitationem!
    </p>
  </body>

【讨论】：

哇非常感谢！！现在我懂了。通用选择器针对所有元素。正文选择器不会影响标题和段落，因为它是通用选择器的直接目标。如果文本直接在正文中，情况会有所不同，这将受到正文选择器的影响，因为它具有更多的特异性。再次，非常感谢您的回答！！！
没错！乐于助人:)

【解决方案2】：

您想要定位段落和标题 (p/h2)

* 适用于所有选择器，但 CSS 是级联的，正如名称所解释的那样，这意味着您为低于第一条规则的 div 提供的任何样式都将覆盖您在 * 上的任何样式

给他们一个类属性

HTML

<body>
  <h2 class="heading">Hi!</h2>
  <p class="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus,
    reprehenderit expedita, non eveniet qui eos nostrum, tenetur odit
    perferendis praesentium voluptatem nobis rerum laborum. Nobis consequuntur
    reprehenderit id nesciunt exercitationem!
  </p>
</body>

CSS

* {
  color: black;
}

.heading, .paragraph {
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5em;
  color: red;
}

【讨论】：