CSS 嵌套 HTML 结构中的属性继承和覆盖

Question

片段中的文字基本上解释了我想要实现的目标。我想要没有 bg- class 的内部 div 继承边框颜色，但是如果颜色发生变化，更深的 div 就会继承该颜色。我真的无法控制嵌套的深度或 div 的结构以及颜色 class 名称的分配方式。

使用 SCSS，所以我有更多颜色并循环遍历它们，但无法弄清楚如何（如果可能的话）实现这种颜色继承。

不确定这是否可以轻松实现，但这是我所拥有的：

div {
  margin: 1em;
  padding: 1em;
  color: white;
}

div.area {
  border: 2px solid gray;
}

div.bg-orange {
  background-color: sandybrown;
  border-color: orange;
}

div.bg-orange .area:not([class*="bg-"]) {
  border-color: orange;
}

div.bg-red {
  background-color: lightpink;
  border-color: red;
}

div.bg-red .area:not([class*="bg-"]) {
  border-color: red;
}

div.bg-green {
  background-color: lightgreen;
  border-color: green;
}

div.bg-green .area:not([class*="bg-"]) {
  border-color: green;
}

div.bg-blue {
  background-color: lightblue;
  border-color: blue;
}

div.bg-blue .area:not([class*="bg-"]) {
  border-color: blue;
}

<div class="area bg-blue">
  <div class="area">Plain</div>
  <div class="area bg-green">
    Green
    <div class="area bg-red">Red</div>
    <div class="area">
      Should should be green border
      <div>Plain no border</div>
      <div class="area">Plain should be green border</div>
      <div class="area bg-red">
        Red
        <div class="area bg-orange">
          Orange
          <div class="area">Plain should be orange border</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是想要的结果吗？

我只是用 inherit 替换了指定的颜色 .area:not([class*="bg-"])。

div {
  margin: 1em;
  padding: 1em;
  color: white;
}

div.area {
  border: 2px solid gray;
}

div.bg-orange {
  background-color: sandybrown;
  border-color: orange;
}

div.bg-orange .area:not([class*="bg-"]) {
  border-color: inherit;
}

div.bg-red {
  background-color: lightpink;
  border-color: red;
}

div.bg-red .area:not([class*="bg-"]) {
  border-color: inherit;
}

div.bg-green {
  background-color: lightgreen;
  border-color: green;
}

div.bg-green .area:not([class*="bg-"]) {
  border-color: inherit;
}

div.bg-blue {
  background-color: lightblue;
  border-color: blue;
}

div.bg-blue .area:not([class*="bg-"]) {
  border-color: inherit;
}

<div class="area bg-blue">
  <div class="area">Plain</div>
  <div class="area bg-green">
    Green
    <div class="area bg-red">Red</div>
    <div class="area">
      Should should be green border
      <div>Plain no border</div>
      <div class="area">Plain should be green border</div>
      <div class="area bg-red">
        Red
        <div class="area bg-orange">
          Orange
          <div class="area">Plain should be orange border</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

使用CSS个变量。诀窍是自定义属性（CSS 变量）会被继承，直到您在更深层次上覆盖它。

div {
  margin: 1em;
  padding: 1em;
  color: white;
}
div.area {
  border: 2px solid var(--c,gray);
}

div.bg-orange {
  background-color: sandybrown;
  --c: orange;
}

div.bg-red {
  background-color: lightpink;
  --c: red;
}
div.bg-green {
  background-color: lightgreen;
  --c: green;
}
div.bg-blue {
  background-color: lightblue;
  --c: blue;
}

<div class="area bg-blue">
  <div class="area">Plain</div>
  <div class="area bg-green">
    Green
    <div class="area bg-red">Red</div>
    <div class="area">
      Should should be green border
      <div>Plain no border</div>
      <div class="area">Plain should be green border</div>
      <div class="area bg-red">
        Red
        <div class="area bg-orange">
          Orange
          <div class="area">Plain should be orange border</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS 嵌套 HTML 结构中的属性继承和覆盖

CSS properties inheritance and overriding in a nested HTML structure

html

css

layout

nested

sass