CSS 选择最多 N 层深的嵌套元素

Question

我有许多嵌套元素，我试图只选择前 N 层。下面显示了一个工作示例，我在其中选择前 7 个级别并设置它们的样式。这完全符合我的要求，但是，我希望有一种选择这些元素的简化方法。

在我的实际用例中，我不知道嵌套元素的总数，并且我试图选择前 50 层，所以使用上面的方法会很困惑。不幸的是，我无法更改我的应用程序中的 HTML，因此它需要是一种仅限 CSS 的方法。谢谢。

.container > div,
.container > div > div,
.container > div > div > div,
.container > div > div > div > div,
.container > div > div > div > div > div,
.container > div > div > div > div > div > div,
.container > div > div > div > div > div > div > div {
  border-left: 1px solid;
  padding-left: 15px;
}

<div class="container">
  <div>
    A
    <div>
      B
      <div>
        C
        <div>
          D
          <div>
            E
            <div>
              F
              <div>
                G
                <div>
                  H
                  <div>
                    I
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这在目前的所有 CSS 版本中都是不可能的，据我所知，Descendant Level Selector 不打算选择指定级别的所有元素即将实现。

---

您可以做的是为您想要选择和使用的所有元素设置一个类:

.container .class {
    border-left: 1px solid;
    padding-left: 15px;  
 }

---

如果您不能对 HTML 进行任何更改或使用 JavaScript，那么您目前拥有的就是最好的选择。