Question

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

.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输出仍然远远小于使用当前方法所需的长选择器字符串。

第n个嵌套元素的选择器

1 个答案:

讨论“最佳”