在網頁設計中,表格是常用的 HTML 元素之一。在表格中,很多時候需要將表格的奇偶行設置不同的顏色或者背景,來區分數據行和表格頭,使表格數據更清晰易讀。
在 CSS 樣式表中,可以使用偽類來實現表格奇偶行的選擇。:nth-child 偽類可以選中父元素下的某個子元素,可以根據表格中特定行的順序來進行選中。
/* 選擇偶數行,從第2行開始,每隔2個選擇一次 */ tr:nth-child(even){ background-color: #f2f2f2; } /* 選擇奇數行,從第1行開始,每隔2個選擇一次 */ tr:nth-child(odd){ background-color: #fff; }
一個常見的誤解是 :nth-child(odd) 應該選擇從第一個元素開始的奇數行,實際上這個偽類是根據元素在文檔中的排列順序而不是表格中的順序選擇行的。也就是說,即使表格的第一行是表格頭不是數據行,在使用:nth-child(odd)時也會將其作為第一行,將第二行標記為 even 類。
在實際運用中,為了避免上述誤解,通常會在 CSS 樣式表中將表格頭和數據分別設置不同的 class 或者 ID,使用偽類時分別選中。
/* 選擇數據表格的偶數行,從第2行開始,每隔2個選擇一次 */ .table-data tr:nth-child(even){ background-color: #f2f2f2; } /* 選擇數據表格的奇數行,從第1行開始,每隔2個選擇一次 */ .table-data tr:nth-child(odd){ background-color: #fff; } /* 對表格頭不添加背景 */ .table-data th{ background-color: none; }
以上是在 CSS 中表格奇偶行的選擇的簡介。通過使用 :nth-child 偽類可以將表格的數據行設置為不同的背景色或樣式,更好地突出數據和表格結構。不過要注意在實際運用中將表格頭和數據分別設置 class 或者 ID 避免誤解。