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

Posted 2023-03-05

【中文标题】嵌套 HTML 结构中的 CSS 属性继承和覆盖

【英文标题】：CSS properties inheritance and overriding in a nested HTML structure

【发布时间】：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>

【参考方案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 - 是的。我很可能误解了您的第一条评论。

我只是很困惑，为什么更改实际上只是颜色值的内容会使以前被覆盖的规则优先。也许我做错了数学。