css – nth-child要交替2行

前端之家收集整理的这篇文章主要介绍了css – nth-child要交替2行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > nth-child for every two table rows3个
我想使用CSS3的nth-child选择器在两行厚的背景颜色之间交替,而不是在使用nth-child(奇数)时通常的一行.

The “Result” section of this jsFiddle illustrates what I want.

所以我们会有一张桌子:

ROW 1: Blue
ROW 2: Blue
ROW 3: Red
ROW 4: Red
ROW 5: Blue
ROW 6: Blue

解决方法

你可以用这个:
tr {
    background: blue;
}

tr:nth-child(4n+1),tr:nth-child(4n+2) {
    background: red;
}

n将从0开始计数.

DEMO

猜你在找的CSS相关文章