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

【问题标题】：CSS properties inheritance and overriding in a nested HTML structure嵌套 HTML 结构中的 CSS 属性继承和覆盖
【发布时间】：2021-12-18 03:48:45
【问题描述】：

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

使用 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>

【问题讨论】：

标签： html css layout sass nested

【解决方案1】：

使用 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>

【讨论】：

【解决方案2】：

这是想要的结果吗？

我刚刚用 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>

【讨论】：

这确实可行。我对规则值显然如何影响特异性感到困惑。
看起来很直观。我认为特异性受到附加到 div. 选择器的附加类 (.area) 的影响。
我不明白。您的 CSS 选择器与原始选择器相同，不是吗？
@isherwood - 是的。我很可能误解了您的第一条评论。
我只是很困惑，为什么更改实际上只是颜色值的内容会使以前被覆盖的规则优先。也许我做错了数学。