一、奇偶選擇器
表格在呈現數據的時候我們為了方便觀看,而隔行顯示不同的顏色,雖然可以用用類選擇器 class實現這種效果,但是未免太過麻煩,為了更加簡便地表現這種特殊的效果我們需要用到一種特殊的選擇器,這就是奇偶選擇器。
二、奇偶選擇器的樣式:
- 前面通常是一個標簽或是其他類型的名字;
- 后面冒號 : 隔開,然后 n 表示第 n 個,child 表示子元素;
- child 后面跟着一對括號( ),這個括號里表示究竟是第幾個元素;
- 里面可以是一個數字或者是 odd(奇數個元素) 或者是 even(偶數個元素)
- 括號后面是大括號 { } ,可以在里面放上背景顏色樣式;
- odd 是單行
- even是雙行
三、奇偶選擇器的應用
【奇偶選擇器】使用odd和even屬性,具體寫法如下所示:
- <style type="text/css">
- tr:nth-child(odd) {.... }
- table tr:nth-child(even) { .... }
- </style>
- <table>
- <tr><td>...</td></tr>
- <tr><td>...</td></tr>
- <tr><td>...</td></tr>
- <tr><td>...</td></tr>
- </table>
:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素,不論元素的類型。
n 可以是數字、關鍵詞或公式。
使用公式 (an + b)。描述:表示周期的長度,n 是計數器(從 0 開始),b 是偏移值。
在這里,我們指定了下標是 3 的倍數的所有 p 元素的背景色:
<!DOCTYPE html> <html> <head> <style> p:nth-child(3n+0) { background:#ff0000; } </style> </head> <body> <p>第一個段落。</p> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p> <p>第五個段落。</p> <p>第六個段落。</p> <p>第七個段落。</p> <p>第八個段落。</p> <p>第九個段落。</p> </body> </html>