我有许多嵌套元素,并且我尝试仅选择前 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>
据我所知,这在目前的所有 CSS 版本中都是不可能的Descendant Level Selector
选择所有元素达到指定级别的功能不打算很快实现。
您可以做的是为您想要选择和使用的所有元素设置一个类:
.container .class {
border-left: 1px solid;
padding-left: 15px;
}
如果您无法对 HTML 进行任何更改或使用 JavaScript,那么您当前所拥有的就是您最好的选择。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)