css3中的結構僞類選擇器

2023-08-06 16:58:55

結構僞類選擇器

作用：可以根據元素在文檔樹中的某些特性（如他們的相對位置）定位到他們。

好處：通過文檔樹結構的互相關系來比對特定的元素，進而減少HTML文檔對ID或類名的定義幫助你保持代碼幹淨和整潔。

文法：E;first-chlid = E:nth-child(1);

E:last-child = E:nth-last-child(1);

E;root

:root 僞類選擇頁面的根元素。十有八九根節點是 <html> 元素，例如：

:root { background-color: #fcfcfc; }

除了給 <html> 元素設定樣式，這個僞類基本沒什麼價值，可能也就描述性稍強些：

html { background-color: #fcfcfc; }

E:nth-child() odd代表奇數 even代表偶數

:nth-child() 選擇器可能需要一些實踐才能完全了解。最簡單的記憶方法是使用關鍵詞“奇數或偶數”（odd或 even），因為在顯示由行列組成的資料表格時，這将非常有用。例如，我們可以使用下列内容：

ul li:nth-child(odd) {
background-color: #666;
color: #fff; }

這将使無序清單中的每個奇數行高亮顯示。您可能會發現在表格中使用這種技術非常友善。例如：

table tr:nth-child(even) { … }

:nth-child 選擇器更明确靈活，是以，你可以選擇清單的第三個元素，像這樣：

li:nth-child(3) { … }

請注意 n 并不是從零開始，第一個元素是 :nth-child(1)，第二個是 :nth-child(2)，以此類推。

我們也可以利用一些簡單的代數，使它變得更加精彩。考慮以下代碼：

li:nth-child(2n) { … }

當我們以這種方式使用 n，它代表對所有正整數，直到文檔耗盡可選擇的元素。在這種情況下，它會選擇下列清單項：

未選擇元素 (2 × 0)
第 2 個元素 (2 × 1)
第 4 個元素 (2 × 2)
第 6 個元素 (2 × 3)
第 8 個元素 (2 × 4)
等等…

這實際上和使用 :nth-child(even) 完全一緻。是以我們混入點東西：

li:nth-child(5n) { … }

對應選擇的節點元素：

未選擇元素 (5 × 0)
第 5 個元素 (5 × 1)
第 10 個元素 (5 × 2)
第 15 個元素 (5 × 3)
第 20 個元素 (5 × 4)
等等…

對于長清單或表格而言，也許這将很有用，也可能完全無用。我們還可以在這一公式中執行數字加減法：

li:nth-child(4n + 1) { … }

對應選擇的節點元素：

第 1 個元素 ((4 × 0) + 1)
第 5 個元素 ((4 × 1) + 1)
第 9 個元素 ((4 × 2) + 1)
第 13 個元素 ((4 × 3) + 1)
第 17 個元素 ((4 × 4) + 1)
等等…

這裡 SitePoint 指出了一個怪癖的功能，如果你将 n 設定為負值，則可以像這樣選擇前 x 項。

li:nth-child(-n + x) { … }

如果你期望選擇前 5 項，可以這樣寫：

li:nth-child(-n + 5) { … }

對應選擇的節點元素：

第 5 個元素 (-0 + 5)
第 4 個元素 (-1 + 5)
第 3 個元素 (-2 + 5)
第 2 個元素 (-3 + 5)
第 1 個元素 (-4 + 5)
未選擇元素 (-5 + 5)
未選擇元素 (-6 + 5)

繼續閱讀