使用nth-child()范围将样式应用于nth-children

时间:2019-05-23 12:15:27

标签: css css-selectors ngx-datatable

假设我有下表:

enter image description here

我想每三行更改一次背景色(三行)。例如,三行应为白色,接下来的三行应为灰色,依此类推。

一直在努力使用nth-child()做到这一点:

使用

.datatable-row-wrapper:nth-child(n+4):nth-child(-n+6) {
    background: grey; 
}

我得到:

enter image description here

因此,这适用于第4、5和6行,但不适用于其余行。

尝试:

.datatable-row-wrapper:nth-child(4n+4), 
.datatable-row-wrapper:nth-child(4n+5), 
.datatable-row-wrapper:nth-child(4n+6) {
    // some color
}

我得到:

enter image description here

因为我正在寻找4的倍数,所以毕竟是可以预期的。

编辑:感谢您将此标记为重复。正在为偏移量而苦苦挣扎,但How to select a range of elements in repeated pattern对此做了解释。

作为参考,解决方案是:

.datatable-row-wrapper:nth-child(6n+4), 
.datatable-row-wrapper:nth-child(6n+5), 
.datatable-row-wrapper:nth-child(6n+6) {
    // some color
}

0 个答案:

没有答案
相关问题