Css 第n个嵌套元素的选择器

我正在处理一个不可确定嵌套性的树视图，但希望为样式定义一些嵌套规则。例如，我希望第一级项目具有特定的边框。将嵌套项直接放在下面，使其具有不同的边框。我有一个工作示例，但它是静态的、冗长的。我知道必须有一种更好的方法来使用选择器，但我似乎无法让它工作。这是我目前的解决方案-

.item {
    border-left-color: #somecolor1;
}
.item > .item {
    border-left-color: #somecolor2;
}
.item > .item > .item {
    border-left-color: #somecolor3;
}
.item > .item > .item > .item {
    border-left-color: #somecolor4;
}
.item > .item > .item > .item > .item {
    border-left-color: #somecolor5;
}

---

这是可行的，但显然有点冗长。有更好的方法吗？

在CSS中，选择器字符串主要描述嵌套结构，并且目前不存在任何代际跳过选择器，因此理论上您可以使用类似于

。item:nth孙子（4）

的方法来替换第五个示例

如果减少css的冗长性对您来说非常重要（假设您正在打开10级甚至100级嵌套），那么您确实需要考虑修改html本身，以减少所需的css。这可以通过服务器端脚本（PHP等）或客户端脚本（Javascript）动态完成，也可以由您静态完成。你选择哪种方式取决于多种因素

html修改可以采用更具体的类或直接样式属性的形式，但我建议采用前者。以下是至少四种减少css的方法：

#1多个等级，一个表示等级

示例HTML

#2个多类，一个表示颜色

示例HTML

#3表示级别的单个类名

示例HTML

#每个项目有4个样式属性

示例HTML

关于“最佳”的讨论 通常，动态解决方案最终会生成类似于#4的html，这使得html非常冗长，我个人不推荐这样做。但是，这些动态解决方案不需要这样做，而是可以添加类名称，如#1-3

什么是最终的“最佳”在很大程度上取决于你想要实现什么，你有多少控制权，还有什么其他属性需要改变。就我个人而言，我也会避免使用#2，因为它通过将类名与“左边框颜色”关联，开始将表示与html联系得太多。对我来说，解决方案#1或#3最好，因为它们只是设置类，帮助css了解

项

的“级别”，然后，它允许针对您可能需要的任何内容，将特定目标设定到该级别

---

当然，如果您真的要处理100个嵌套级别，那么即使对于解决方案#1-3，您也可能需要研究一些css预处理器来生成所需的100个级别的代码。但是css输出仍然远远小于使用当前方法所需的长选择器字符串。

使用JavaScript，您可以动态应用样式，如果您愿意这样做的话。第XX个选择器使用adajacent标记，而不是嵌套标记。不幸的是：（，它们也不会混合/过滤。也许使用预处理器作为SCS或其他方式会有所帮助。@GCyrillus很好的一点，服务器端语言只使用CSS就可以很容易地做到这一点，没有比这更好的了。如果所有样式都有相同的选择器，你可以删除

符号，但仅此而已。我知道问题是这样的没有javascript标记，但您可以尝试以下内容：感谢您提供了非常详尽的答案。我将此标记为答案，因为我认为它包含了所有可能的解决方案。现在来看这个问题，详细程度不是什么问题，但它需要更具动态性，因此使用预处理器可能是一个不错的选择。有abs绝对应该类似于

。item:nth孙子（4）

，因为我想无限期地使用交替的弯曲方向设置嵌套div的样式，这样我只需使用一些css规则和纯html就可以快速地为快速用户界面打上记号

<div class="item L-1">
 <div class="item L-2">
  <div class="item L-3">
  </div>
 </div>
</div>

.item.L-1 {
    border-left-color: #somecolor1;
}
.item.L-2 {
    border-left-color: #somecolor2;
}
.item.L-3 {
    border-left-color: #somecolor3;
}

<div class="item LBC-1"> 
 <div class="item LBC-2">
  <div class="item LBC-3">
  </div>
 </div>
</div>

.item.LBC-1 {
    border-left-color: #somecolor1;
}
.item.LBC-2 {
    border-left-color: #somecolor2;
}
.item.LBC-3 {
    border-left-color: #somecolor3;
}

<div class="item-L1"> 
 <div class="item-L2">
  <div class="item-L3">
  </div>
 </div>
</div>

[class *= "item-"] {
    /* common css properties for the items goes here */
}

.item-L1 {
    border-left-color: #somecolor1;
}
.item-L2 {
    border-left-color: #somecolor2;
}
.item-L3 {
    border-left-color: #somecolor3;
}

<div class="item" style="border-left-color: #somecolor1"> 
 <div class="item" style="border-left-color: #somecolor2">
  <div class="item"  style="border-left-color: #somecolor3">
  </div>
 </div>
</div>

/* none to control color */