Question

很抱歉，如果有人问这个问题，但我不知道为什么会这样！即使我在正文选择器中将其设置为红色，该文本仍显示为黑色。感谢您的帮助。（注意：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>

Answer 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>

Answer 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;
}

为什么通用选择器会覆盖元素选择器？

2 个答案: