我正在研究不可确定的可嵌套性的树视图,但是想为样式定义一些嵌套规则.例如,我希望第一级项目具有特定边框.紧接在下面的嵌套项目具有不同的边框.我有一个工作的例子,但它是静态和冗长的.我知道使用选择器必须有更好的方法,但我似乎无法使它工作.这是我目前的解决方案 –
.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-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输出仍然远远小于使用当前方法所需的长选择器字符串.
