html table奇偶行颜色设置 (CSS选择器)

java哥阅读：1424 2020-10-18 22:04:21 评论：0

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

下面的例子, 设置表格的奇偶行背景颜色不同；单独设置表格的第1列背景颜色不同。

 1 <!DOCTYPE html> 
 2 <html> 
 3    <head> 
 4         <style type="text/css">  
 5             table{ 
 6                 height: 200px; 
 7                 width:400px; 
 8                 border:2px solid  green; 
 9             } 
10              
11             td{ 
12                 border:1px solid; 
13             } 
14              
15             tr:nth-child(2n){ 
16                 background:#00CCCC; 
17             } 
18              
19             tr td:nth-child(1){ 
20                 background:#FFCCCC; 
21             } 
22         </style>   
23     </head>  
24     <body> 
25         <table> 
26             <tr> 
27                 <td>1</td> <td>2</td> <td>3</td> 
28             </tr> 
29             <tr> 
30                 <td>1</td> <td>2</td> <td>3</td> 
31             </tr> 
32             <tr> 
33                 <td>1</td> <td>2</td> <td>3</td> 
34             </tr> 
35             <tr> 
36                 <td>1</td> <td>2</td> <td>3</td> 
37             </tr> 
38         </table> 
39     </body> 
40 </html>

效果:

标签:CSS

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。