css - 是否有一个 css 标签可以将 div 定位到其父级的特定嵌套深度？

Question

我很难找到可以优雅地处理以下内容的 css 选择器(这组 css 规则目前有 25 个 div 深):

    div{background-color: #ffb3b3; outline:1px solid black;}
    div div{background-color: #ffc6b3;}
    div div div{background-color: #ffd9b3;}
    div div div div{background-color: #ffecb3;}
    div div div div div {background-color: #ffffb3;}
    div div div div div div {background-color: #ecffb3;}
    div div div div div div div {background-color: #d9ffb3;}
    div div div div div div div div {background-color: #c6ffb3;}
    div div div div div div div div div {background-color: #b3ffb3;}
    div div div div div div div div div div div {background-color: #b3ffc6;}
    div div div div div div div div div div div div {background-color: #b3ffd9;}
    div div div div div div div div div div div div div {background-color: #b3ffec;}
    div div div div div div div div div div div div div div {background-color: #b3ffff;}
    div div div div div div div div div div div div div div div {background-color: #b3ecff;}
    div div div div div div div div div div div div div div div div {background-color: #b3d9ff;}
    div div div div div div div div div div div div div div div div div {background-color: #b3c6ff;}
    div div div div div div div div div div div div div div div div div div {background-color: #b3b3ff;}
    div div div div div div div div div div div div div div div div div div div {background-color: #c6b3ff;}
    div div div div div div div div div div div div div div div div div div div div {background-color: #d9b3ff;}
    div div div div div div div div div div div div div div div div div div div div div {background-color: #ecb3ff;}
    div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3ff;}
    div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3ec;}
    div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3d9;}
    div div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3c6;}
    div div div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3b3;}

是否有为这种嵌套标签设计的选择器？

我为什么要这样做？回答:这组css 规则用于了解引导页面中的嵌套容器。这是可以应用这些 css 规则的一些 html 的简单示例:

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-6">
        <p>One of three columns</p>
        <div class="row">
            <div class="col-12 col-lg-6">
                <p>One of three columns</p>
            </div>
            <div class="col-12 col-lg-6">
                <p>One of three columns</p>
            </div>
       </div>
    </div>
    <div class="col-12 col-lg-6">
      <p>One of three columns</p>
      <div class="col-12 col-lg-6">
          <p>One of three columns</p>
      </div>
        <div class="col-12 col-lg-6">
          <p>One of three columns</p>
      </div>
    </div>
  </div>
</div>

        .demo{display:inline; }
        
        div{background-color: #ffb3b3; outline:1px solid black;}
        div div{background-color: #ffc6b3;}
        div div div{background-color: #ffd9b3;}
        div div div div{background-color: #ffecb3;}
        div div div div div {background-color: #ffffb3;}
        div div div div div div {background-color: #ecffb3;}
        div div div div div div div {background-color: #d9ffb3;}
        div div div div div div div div {background-color: #c6ffb3;}
        div div div div div div div div div {background-color: #b3ffb3;}
        div div div div div div div div div div div {background-color: #b3ffc6;}
        div div div div div div div div div div div div {background-color: #b3ffd9;}
        div div div div div div div div div div div div div {background-color: #b3ffec;}
        div div div div div div div div div div div div div div {background-color: #b3ffff;}
        div div div div div div div div div div div div div div div {background-color: #b3ecff;}
        div div div div div div div div div div div div div div div div {background-color: #b3d9ff;}
        div div div div div div div div div div div div div div div div div {background-color: #b3c6ff;}
        div div div div div div div div div div div div div div div div div div {background-color: #b3b3ff;}
        div div div div div div div div div div div div div div div div div div div {background-color: #c6b3ff;}
        div div div div div div div div div div div div div div div div div div div div {background-color: #d9b3ff;}
        div div div div div div div div div div div div div div div div div div div div div {background-color: #ecb3ff;}
        div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3ff;}
        div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3ec;}
        div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3d9;}
        div div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3c6;}
        div div div div div div div div div div div div div div div div div div div div div div div div div div {background-color: #ffb3b3;}
        

  <div class='demo'>1&nbsp;<div class='demo'>2&nbsp;<div class='demo'>3&nbsp;<div class='demo'>4&nbsp;<div class='demo'>5&nbsp;<div class='demo'>6&nbsp;<div class='demo'>7&nbsp;<div class='demo'>8&nbsp;<div class='demo'>9&nbsp;<div class='demo'>10&nbsp;<div class='demo'>11&nbsp;<div class='demo'>12&nbsp;<div class='demo'>13&nbsp;<div class='demo'>14&nbsp;<div class='demo'>15&nbsp;<div class='demo'>16&nbsp;<div class='demo'>17&nbsp;<div class='demo'>18&nbsp;<div class='demo'>19&nbsp;<div class='demo'>20&nbsp;<div class='demo'>21&nbsp;<div class='demo'>22&nbsp;<div class='demo'>23&nbsp;<div class='demo'>24&nbsp;<div class='demo'>25&nbsp;</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>      
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
    <p>One of three columns</p>
    <div class="row">
        <div class="col-6">
            <p>One of three columns</p>
        </div>
        <div class="col-6">
            <p>One of three columns</p>
        </div>
   </div>
</div>
<div class="col-12 col-lg-6">
  <p>One of three columns</p>
  <div class="col-6">
      <p>One of three columns</p>
  </div>
    <div class="col-6">
      <p>One of three columns</p>
  </div>
</div>
</div>
</div>

Answer 1

没有选择第 n 个嵌套子项的 css 属性。然而，这是一个相当普遍的问题，在大多数情况下，更容易和更易于维护的解决方案是使用 css 类来定位特定元素而不是嵌套。

.hello {
  color: blue;
  font-size: 20px;
}

<div>
  <div>
    <div>
      <div class="hello">
        Hello World
      </div>
    </div>
  </div>
</div>