在这段代码中，为什么两段都是蓝色的？

Question

.red p {
  color: red;
}

.blue p {
  color: blue;
}

<div class="blue">
  <p> first </p>
  <div class="red">
    <p> second </p>
  </div>
</div>

我假设第一个是蓝色，第二个是红色，但事实并非如此。为什么两个段落都是蓝色的？

Answer 1

由于CSS中的“ C”，两个段落均为蓝色-代表级联。查看MDN docs，了解CSS规则的应用和继承方式。

在您的情况下，所有<p>元素都是蓝色的，因为.blue p选择器是CSS中的最后一条规则，它会覆盖.red p选择器。

您可以像这样重组CSS，以确保<p> div中的.red元素为红色。

.blue p {
  color: blue;
}

.blue .red p {
  color: red;
}

Answer 2

如您所知：

• .blue p匹配.blue类中的所有p标签。
• .red p匹配.red类中的所有p标签。

您的<p> first </p>在蓝色类中，因此它与.blue p规则匹配，并呈现为蓝色。

<div class="red">既在红色类别中也在蓝色类别中，因此我们有一个难题。 CSS解决此问题的方法是使用最后出现的任何规则。在这种情况下，.blue p规则最后出现，并且文本呈现为蓝色。

CSS修复

如果p标签始终是颜色类别的直接子代，则可以执行以下操作。 >是仅与直系后代匹配的后代选择器。

.red > p {
  color: red;
}

.blue > p {
  color: blue;
}

CSS修复2

您也可以按照Tom的建议进行操作。之所以起作用，是因为更具体的CSS规则将覆盖不太具体的CSS规则。即使蓝色规则排在第二位，因为div .red p有两个类，但它比.blue p更具体。

.red p,
.blue .red p {
  color: red;
}

.blue p,
.red .blue p {
  color: blue;
}

但是，这只会使您的问题更深一层。以下HTML中的红色类仍将显示为蓝色。

<div class="blue">
  <div class="blue">
    <p> first </p>

    <div class="red">
      <p> second </p>
    </div>

  </div>
</div>

HTML修复

这是我建议您使用的方法。您可以简单地将您的班级移至p标签：

<div>
  <p class="blue"> first </p>
  <div>
    <p class="red"> second </p>
  </div>
</div>

其他需要注意的项目

还有其他方法可以覆盖CSS规则。我建议您研究CSS specificity。

Answer 3

因为您给父div设置了蓝色。这应该是您的结构。

<div class="blue">
 <p>first</p>
</div>
<div class="red">
 <p>second</p>
</div>

CSS代码为：

.red {
  color: red;
}

.blue {
  color: blue;
}