css - 第 n 个嵌套元素的选择器

Question

我正在研究无法确定可嵌套性的 TreeView ，但想定义一些嵌套的样式规则。例如，我希望第一级元素具有特定的边框。直接在下面嵌套元素以具有不同的边框。我有一个工作示例，但它是静态且冗长的。我知道必须有一种更好的使用选择器的方法，但我似乎无法使其工作。这是我当前的解决方案-

.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;
}

所以这可行，但显然有点冗长。有更好的办法吗？

Answer 1

在 CSS 中，选择器字符串主要描述嵌套结构，并且当前不存在任何分代跳跃选择器，因此理论上您可以执行类似 .item:nth-grandchild(4) 的操作替换您的第五个示例。

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

html修改可以采用更具体的类或直接样式属性的形式，但我推荐前者。这里至少有四种减少 CSS 的方法:

#1 多个类，一个指示级别

示例 HTML

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

CSS 示例

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

#2 多个类，一种指示颜色

示例 HTML

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

CSS 示例

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

#3 表示级别的单个类名称

示例 HTML

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

CSS 示例

[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;
}

每个元素的 #4 样式属性

示例 HTML

<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>

CSS 示例

/* none to control color */

“最佳”讨论

通常动态解决方案最终会生成像 #4 那样的 html，这最终会使 html 变得非常冗长，我个人不会推荐它。然而，那些动态解决方案不需要这样做，而是可以添加类名，如#1-3。

最终的“最佳”很大程度上取决于您想要实现的目标、您拥有多少控制权以及哪些其他属性还需要更改。就我个人而言，我也会避免#2，因为它通过将类名与“左边框颜色”相关联而开始将演示文稿与 html 联系得太多。对我来说，解决方案 #1 或 #3 是最好的，因为它们只是设置类来帮助 css 了解 .item 所处的“级别”，然后允许针对该级别进行特定定位您可能需要它的任何级别。

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