要用到的Css3选择器 element:nth-child(number){ } 选择器匹配属于其父元素的第 number 个子元素 参数 Number odd 奇数 even 偶数 W3Sch
... .
要用到的Css3选择器
element:nth-child(number){
}
选择器匹配属于其父元素的第 number 个子元素
- 参数 Number
- odd 奇数
- even 偶数
W3School介绍:http://www.w3school.com.cn/cssref/selector_nth-child.asp
.
完整demo:
.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>测试</title></head><style> #testtable tbody tr:nth-child(odd) { /* 匹配奇数行 */ background-color: lightskyblue; color: black; } #testtable tbody tr:nth-child(even) { /* 匹配偶数行 */ background-color: lightsalmon; color: white; }</style><body> <table id="testtable" border="1" width="100%"> <thead> <tr> <th colspan="3">标题</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> </tbody> </table></body></html>.
