less / css - 将数据属性的值为(n)的dom元素

frerum 发布于 2019-03-09 css 最后更新 2019-03-09 14:33 0 浏览

我有一个导航菜单,它根据菜单层次/分类中的深度为菜单项分配一组颜色。所以,例如,所有顶级菜单项目都会变成黑色,下一级变为红色,下一级变为绿色等,并且由于层次结构变得非常深,我想用数学来定位它们,排序方式该CSS可以针对第n子元素。但是,我不能使用nth-child,因为这些容器元素('browse-level')是动态添加的并从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)缩短此代码吗?
已邀请:

xporro

赞同来自:

我会去

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