在css中,可以利用「:nth-child(n)」選擇器來進行奇偶匹配,選擇奇偶行元素;此選擇器的參數n可以是數字、關鍵字或公式,設定n為「Odd」或「even」關鍵字即可配對下標是奇數或偶數的子元素。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中,:nth-child(n)
選擇器符合屬於其父元素的第 N 個子元素,不論元素的類型。
n
可以是數字、關鍵字或公式。
奇偶匹配,選擇奇偶行元素
#:nth-child(odd)
與 :nth -child(even)
分別符合序號為奇數與偶數的元素。
Odd 和 even 是可用來匹配下標是奇數或偶數的子元素的關鍵字(第一個子元素的下標是 1)。
範例:
<!DOCTYPE html> <html> <head> <style> p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; } </style> </head> <body> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> </body> </html>
效果圖:
#說明:奇數(odd)與(2n 1)結果一樣;偶數(even)與(2n 0)、(2n)結果一樣。
(學習影片分享:css影片教學)
以上是css怎麼選擇奇偶行元素的詳細內容。更多資訊請關注PHP中文網其他相關文章!