css - 是否有一个CSS标记可以将div定位到距其父对象特定嵌套深度的位置？

我很难找到可以优雅地处理以下内容的css选择器（这组css规则当前深度为25 divs）：

    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>

最佳答案

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

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

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