我有一个导航菜单,它根据菜单项在菜单层次结构/分类法中的深度为菜单项分配一组颜色。因此,例如,所有顶级菜单项的颜色为黑色,下一级为红色,下一级为绿色等,并且由于层次结构非常深,我想使用数学来定位它们,有点像该 css 可以针对第 n 个 child 。但是,我不能使用 nth-child,因为这些容器元素(“浏览级别”)是动态添加和从 DOM 中删除的(它们并非同时全部在 DOM 中),这就是我的目标数据属性。
所以这是 CSS:
.browse-level[data-level="1"] li a {
background: @level1;
}
.browse-level[data-level="2"] li a {
background: @level2;
}
.browse-level[data-level="3"] li a {
background: @level3;
}
.browse-level[data-level="4"] li a {
background: @level4;
}
...等等
有 8 个颜色值(之后序列将重复)。我可以(使用 LESS 或纯 CSS)缩短这段代码吗?
最佳答案
我会去
@level1: #aaa;
@level2: #bbb;
@level3: #ccc;
@level4: #ddd;
@level5: #eee;
@level6: #fff;
@level7: #000;
@level8: #111;
.mymixin(@lev) when ( @lev > 0 ) {
@ruleNameA: e('.browse-level[data-level="');
@ruleNameB: e('"] li a');
@{ruleNameA}@{lev}@{ruleNameB} {
@bgAux: e('level@{lev}');
background: @@bgAux ;
}
.mymixin( @lev - 1 ) ;
}
.mymixin(8);
根据 http://less2css.org/它产生:
.browse-level[data-level="8"] li a {
background: #111111;
}
.browse-level[data-level="7"] li a {
background: #000000;
}
.browse-level[data-level="6"] li a {
background: #ffffff;
}
.browse-level[data-level="5"] li a {
background: #eeeeee;
}
.browse-level[data-level="4"] li a {
background: #dddddd;
}
.browse-level[data-level="3"] li a {
background: #cccccc;
}
.browse-level[data-level="2"] li a {
background: #bbbbbb;
}
.browse-level[data-level="1"] li a {
background: #aaaaaa;
}
关于javascript - less/css - 使用值为 (n) 的数据属性定位 dom 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15953461/