要用到的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>
