通过 css3
中伪类 :nth-child
来实现。其中 :nth-child(an+b)
匹配下标 { an + b; n = 0, 1, 2, ...}
且结果为整数的子元素
nth-child(2n)
/nth-child(even)
: 双行样式nth-child(2n+1)
/nth-child(odd)
: 单行样式其中 tr
在表格中代表行,实现表格中单双行样式就很简单了:
tr:nth-child(2n) {
background-color: red;
}
tr:nth-child(2n+1) {
background-color: blue;
}
同理:
:nth-child(-n+3)
:nth-last-child(-n+3)