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


 

: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>

效果:

可以参考:

http://www.w3school.com.cn/cssref/selector_nth-child.asp


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM