CSS层叠到子元素上

Question

我正在尝试创建CSS布局，在其中使用一组类来确定元素及其内容的配色方案。

我在级联（我认为）方面遇到了一些问题-对我来说这似乎是一个非常基本的问题，但我只是想不出一种简单的方法。

.red-content p {
  color: red;
}

.blue-content p {
  color: blue;
}

<div class="blue-content">
  <div class="inner">
    <p>Blue</p>
  </div>
  <div class="red-content">
    <div class="inner">
      <p>Red</p>
    </div>
  </div>
</div>

这里是一个Codepen，它说明了我遇到的问题：https://codepen.io/tomhayes/pen/OJVqKoo

[基本上，蓝色文本应该是蓝色，红色文本应该是红色，但是规则相互冲突，所有文本都变成蓝色。

我不能使用CSS规则的顺序来实现这一点，因为元素的顺序会改变，并且我试图避免使用>，因为元素有时有时必须嵌套在多个层次上。

Answer 1

您为红色班级增加了一些特殊性。

.red-content:not(.blue-content) p {
  color: red;
}

.blue-content p {
  color: blue;
}

<div class="blue-content">
  <div class="inner">
    <p>Blue</p>
  </div>
  <div class="red-content">
    <div class="inner">
      <p>Red</p>
    </div>
  </div>
</div>

§ 4.3. The Negation (Matches-None) Pseudo-class: :not()

:not()伪类允许编写[[无用的选择器。

例如:not()，它根本不表示任何元素，或者:not(*|*)，等同于div:not(span)，但具有更高的特异性。

Answer 2

您仅需要为段落指定此内容？如果没有...

div

.red-content {
  color: red;
}

.blue-content {
  color: blue;
}

Answer 3

检查div的位置，蓝色内容缺少一个，它覆盖了红色内容。

我添加了一些缩进以帮助突出结构。

<div class="blue-content">
  <div class="inner">
    <p>Blue</p>
  </div>
  <div class="red-content">
    <div class="inner">
      <p>Red</p>
    </div>
  </div>
</div>