CSS3奇偶數選擇器是一種選擇器,可用于只選擇文檔中奇數或偶數元素。 使用它可以添加樣式,例如交替行的背景色。
/* 為奇數行添加背景色 */ .odd { background-color: #f2f2f2; } /* 為偶數行添加背景色 */ .even { background-color: #fff; } /* 使用奇偶數選擇器 */ tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #fff; }
在以上示例中,我們定義了兩個類,一個用于奇數行,一個用于偶數行。我們還使用了奇偶數選擇器來為表格的每行添加不同的背景色。這將使表格更容易讀取,更具吸引力。
請注意,我們可以在不同的元素上使用奇偶數選擇器。在上面的示例中,我們使用它來為表格行添加樣式。但是,我們也可以在其他元素上使用它。例如,使用以下代碼為所有偶數標題添加斑馬紋樣式:
h2:nth-child(even) { background-color: #f2f2f2; }
奇偶數選擇器是CSS3的一項重要功能,它可以讓我們輕松地為文檔中的元素添加交替樣式。它對于表格,列表,圖庫等等的設計非常有用。