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

Posted 2023-03-06

【中文标题】CSS 选择最多 N 层的嵌套元素

【英文标题】：CSS select nested elements up to N levels deep

【发布时间】：2016-11-30 11:35:32

【问题描述】：

我有许多嵌套元素，我试图只选择前 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>

【问题讨论】：

您是否希望container 中的每个 div 都成为目标？

我无法在我的应用程序中更改 HTML，所以它必须是纯 CSS 方法 - 它也不能是脚本？

好的，没有 html 更改，但连 jquery 都没有？只有使用 css 是不可能的。请参阅此主题***.com/questions/12206935/…、***.com/questions/1014861/…、***.com/questions/36613187/…

你可以写.container div这将选择容器内的所有div，不管它们有多深

【参考方案1】：

这在迄今为止的所有 CSS 版本中都是不可能的，据我所知，选择所有元素达到指定级别的 Descendant Level Selector 短期内不会实施。 p>

---

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

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

---

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