html - 如何为多级html属性创建nth-child CSS

Question

我目前有一个可以将小部件插入 DOM 的屏幕。我想根据出现类decrement-z-index存在的数量来设置 z 索引。

我写了这个类来尝试实现这一点

.tblrow > .tblcell > div >  .decrement-z-index:nth-child(1) {
        z-index: 200 !important;
}
.tblrow > .tblcell > div >  .decrement-z-index:nth-child(2) {
        z-index: 199 !important;
}
.tblrow > .tblcell > div >  .decrement-z-index:nth-child(3) {
        z-index: 198 !important;
}
.tblrow > .tblcell > div >  .decrement-z-index:nth-child(4) {
        z-index: 198 !important;
}
[![enter image description here][1]][1]

这里有一个 jsFiddle http://jsfiddle.net/r6axhgy2/

当检查任何元素时，decrement-z-index它们都声明它是第 2 次出现

请问我如何在这里正确实现nth-child，以便正确选择nth-child

标签： htmlcss

Answer 1

你nth-child在错误的位置使用下面的代码，希望它对你有帮助

.tbl .tblrow:nth-child(1) .decrement-z-index {
    z-index: 200 !important;
}
.tbl .tblrow:nth-child(2) .decrement-z-index {
    z-index: 199 !important;
}
.tbl .tblrow:nth-child(3) .decrement-z-index {
    z-index: 198 !important;
}
.tbl .tblrow:nth-child(4) .decrement-z-index {
    z-index: 197 !important;
}