根据 DOM 树中的级别更改具有相同类名的元素的背景颜色

Question

我有这个基本的 HTML 结构：

<div class="section-container">
  <div class="section-expander">
  <div class="section-content">
    <div class="some-irrelevant-stuff"></div>
    <div class="section-children">

      <div class="section-container">
        <div class="section-expander">
        <div class="section-content">
          <div class="some-irrelevant-stuff"></div>
          <div class="section-children">

            <div class="section-container">
              <div class="section-expander">
              <div class="section-content">
                <div class="some-irrelevant-stuff"></div>
                <div class="section-children">

                  ...

                </div> <!-- Closing 3rd level section-children -->
              </div> <!-- Closing 3rd level section-content -->
              </div> <!-- Closing 3rd level section-expander -->
            </div> <!-- Closing 3rd level section-container -->

          </div> <!-- Closing 2nd level section-children -->
        </div> <!-- Closing 2nd level section-content -->
        </div> <!-- Closing 2nd level section-expander -->
      </div> <!-- Closing 2nd level section-container -->

    </div> <!-- Closing 1st level section-children -->
  </div> <!-- Closing 1st level section-content -->
  </div> <!-- Closing 1st level section-expander -->
</div> <!-- Closing 1st level section-container -->

这是一个视觉表示：

也许唯一不能自我解释的是 .section-expander 是左侧的彩色线条。

所以，我的问题是，是否有一种方法只使用 LESS，而不添加新类或使用 JS：

1) 更改左侧 .section-expander 的背景颜色，具体取决于它们在 DOM 中的嵌套级别

2) 循环 .section-content 的背景色，同样取决于嵌套级别，正如您在屏幕截图中看到的那样（我循环浅灰色和白色）。

我能想到的最简单的方法是：

.section-container {

  .section-expander { background-color: green; }
  .section-content {
    background-color: lightgray;
    
    .section-expander { background-color: blue; }
    .section-content {
      background-color: white;
      
      .section-expander { background-color: red; }
      .section-content {
        background-color: lightgray;
        
        ...
        
      }
    }
  }
}

我觉得这样做不太聪明。我想我应该使用某种 LESS 循环，但经过数小时的尝试，我真的无法想出按预期工作的东西。有人可以帮我想出更好的办法吗？

Answer 1

考虑以下声明和您的结构：

$A : section-container;
$B : section-expander;
$C : section-content;
$D : section-children;

您的最终 CSS 将如下所示：

.$A .$B { background-color: green;}
.$D .$B {  background-color: blue; }
.$D .$D .$B {  background-color: red;}

...最终，这就是完成工作并对浏览器有意义的方法，无论您使用什么工具来编写更少的代码并获得相同的结果。

如果您觉得通过编写更少的代码来提高效率，请使用一些变量名称（就像我所做的那样），以缩短您的语法，但请确保您不会对代码的可读性造成太大影响。头脑可维护性。

如果您担心生成的 CSS 的长度或浏览器的速度/性能，请不要担心。 CSS 长度的差异并不重要。对页面速度影响更大的是其他因素。

坦率地说，在您的情况下，我会担心您花费大量时间来优化其他人看不到的代码。

---

无论如何，这就是我个人在 SASS 中的做法。我对保持选择器的特异性和z-index（此处不相关）水平较低感到有点疯狂：

$I : some-irrelevant-stuff;
$S : section-;

.#{$S}container {
    position: relative;
    margin: 1rem 0 1rem 1rem;
    background-color: #f3f3f3;
    padding: 1rem;
    .$I {
        padding: 1rem 1rem 1rem 0;
    }

    &::before {
        position: absolute;
        background-color: teal;
        height: 100%;
        left: -1rem;
        top: 0;
        width: 1rem;
        content: '';
        .#{$S}children & {
            background-color: #369;
            .#{$S}children & {
                background-color: #900;
            }
        }
    }
    .#{$S}container {
        background-color: white;
        .#{$S}container {
            background-color: #f3f3f3;
        }
    }
}

https://jsfiddle.net/websiter/m1qsxygc/

注意我还稍微简化了您的标记。