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

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> .red 中的元素div 是红色的。

.blue p {
  color: blue;
}

.blue .red p {
  color: red;
}