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