时间戳

首页 > 解决方案 > CSS 级联到子元素

css - CSS 级联到子元素

问题描述

我正在尝试创建一个 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 规则的顺序来实现这一点，因为元素的顺序会改变，并且我试图避免需要使用>，因为元素有时必须嵌套几层深。

标签： csscss-selectors

解决方案

您可以为您的红色课程添加一些特殊性。

.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。否定（无匹配）伪类： :not()

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

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

推荐阅读