嵌套HTML結構中的CSS屬性繼承和覆寫

片段中的文本基本上解釋了我想要實作的目標。我希望沒有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>

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

這是想要的結果嗎？

我只是用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>

標籤：html css 布局 蠢货 嵌套

上一篇：如何訪問輸入文本框中的值？我不能在不使用ref的情況下直接從事件變數中獲取值嗎？

下一篇：如何在多個網格上制作內容？