如何实现表格单双行条纹样式

通过 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 在表格中代表行，实现表格中单双行样式就很简单了：

代码语言：javascript复制

tr:nth-child(2n) {
  background-color: red;
}


tr:nth-child(2n 1) {
  background-color: blue;
}

同理：

1. 如何匹配最前三个子元素: :nth-child(-n 3)
2. 如何匹配最后三个子元素: :nth-last-child(-n 3)

css3 表格

0 人点赞