html - 让具有最接近边界类的规则在 CSS 中获胜

Question

我在 HTML 中有以下场景:

<div class="red">
     <div class="blue">
         ... <-- maybe more nested parents
             <div class="x">Test</div>
     </div>
</div>

给定以下 CSS:

.blue.x, .blue .x {
  background: blue;
}
.red.x, .red .x {
  background: red;
}

在这种情况下，x 元素的背景显然是红色的，因为两个规则(实际上它是 4，但在这个例子中只有 .red.x 和 .blue.x 适用)适用，红色背景是最后定义的规则。

但是我该如何编写规则，以便选择内部“蓝色”类(它是离 x 更近的父级)？我想根据类的结构而不是 CSS 文件中的顺序来切换颜色。

Answer 1

根据您提供的 HTML，您可以使用 direct child selector, > , 以便选择作为直接子元素(而不是后代)的 .x 元素。

.blue.x,
.blue > .x {
  background: blue;
}
.red.x,
.red > .x {
  background: red;
}

<div class="red">
  <div class="blue">
    <div class="x">Blue</div>
  </div>
</div>
  
<div class="blue">
  <div class="red">
    <div class="x">Blue</div>
  </div>
</div>

但是，由于只选择了直接的 .x 子元素，因此值得指出的是，如果 .x 元素嵌套得更深，这将不起作用。但是您可以在一定程度上解决这个问题:

.blue.x,
.blue > .x,
.blue > * > .x {
  background: blue;
}
.red.x,
.red > .x,
.red > * > .x {
  background: red;
}

<div class="red">
  <div class="blue">
    <div>
      <div class="x">Blue</div>
    </div>
  </div>
</div>
  
<div class="blue">
  <div class="red">
    <div>
      <div class="x">Red</div>
    </div>
  </div>
</div>

或者，如果上述解决方案不够灵活，那么您还可以强制元素继承最近的父元素的值:

.blue,
.blue.x {
  background: blue;
}
.blue * .x {
  background: inherit;
}
.red,
.red.x {
  background: red;
}
.red * .x {
  background: inherit;
}

<div class="red">
  <div class="blue">
    <div>
      <div class="x">Blue</div>
    </div>
  </div>
</div>

<div class="blue">
  <div class="red">
    <section>
      <div>
        <div>
          <div>
            <div class="x">Red</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>