結構偽級-css教學-PHP中文網

Structural Pseudo-Classes

摘錄自Alexis Goldstein、Louis Lazaris和Estelle Weyl合著的《HTML5 & CSS3 for the Real World, 2nd Edition》一書。本書在全球各地的商店有售，您也可以在這裡購買電子書版本。

到目前為止，我們已經了解瞭如何根據元素的屬性和狀態來定位元素。 CSS3 還允許我們僅僅根據元素在標記中的位置來定位它們。這些選擇器歸類於結構性偽類。

現在這些選擇器可能看起來很複雜，但當我們稍後查看如何應用它們時，它們就會更有意義。除了IE8及以下版本外，IE9及更新版本以及所有其他瀏覽器的當前版本和舊版本都支持這些選擇器：

:root 根元素，在我們的HTML文件中是html元素。

E:nth-child(n) 第 n 個子元素 E。 n 參數在下面的說明中解釋。

E:nth-last-child(n) 第 n 個子元素 F（從最後一個開始倒數）。 li:nth-last-child(1) 將匹配任何列表中的最後一項，這與 li:last-child 相同（參見下面的說明）。

E:nth-of-type(n) 在給定父元素中，第 n 個類型為 E 的元素。 nth-child 和 nth-of-type 之間的區別在下面的說明中解釋。

E:nth-last-of-type(n) 與 nth-of-type(n) 相同，但從父元素中的最後一個元素開始倒數。

說明：結構選擇器的參數

有四個偽類在括號中採用方程式 an b 作為參數，或者使用關鍵字 odd 和 even。結構性偽類包括 :nth-child(an b)、:nth-last-child(an b)、:nth-of-type(an b) 和 :nth-last-of-type(an b)。在方程式 an b 中，a 是作為整數的乘數，b 是作為整數的偏移量，n 始終是變量 n。

在最簡單的情況下，您可以傳遞一個整數。例如，E:nth-of-type(3) 將定位單個父元素的第三個 E 元素子元素。您可以傳遞兩個關鍵字 odd 或 even 之一，以定位其他每個元素。您還可以更有效地傳遞數字表達式，例如 E:nth-of-type(3n 1)。 3n 表示每三個元素，定義頻率， 1 是偏移量。默認偏移量為零，因此，nth-of-type(3n) 將匹配系列中的第 3 個、第 6 個和第 9 個元素，而 nth-of-type(3n 1) 將匹配第 1 個、第 4 個、第 7 個等等。

負偏移量也是允許的。 CSS 基於語言，而不是編程語言，因此計數從 1 開始，而不是 0。乘數 a 和變量 n 之間不能有空格，偏移量必須放在最後。

使用這些數字偽類，您可以精確定位要定位的元素，而無需向標記添加類。最常見的示例是表格，其中每隔一行顏色略深一些，以便於閱讀。我們過去必須向每個 tr 添加奇數或偶數類才能實現這一點。現在，我們可以簡單地聲明 tr:nth-of-type(odd) 來定位每行奇數行，而無需觸及標記。您甚至可以更進一步使用三色條紋表：定位 tr:nth-of-type(3n)、tr:nth-of-type(3n 1) 和 tr:nth-of-type(3n 2) 並為每個應用不同的顏色。

E:first-child 如果 E 是其父元素的第一個子元素，則為元素 E。這與 E:nth-child(1) 相同。

E:last-child 如果 E 是其父元素的最後一個子元素，則為元素 E，與 E:nth-last-child(1) 相同。

:first-of-type 與 :nth-of-type(1) 相同。

E:last-of-type 與 :nth-last-of-type(1) 相同。

E:only-child 如果 E 是其父元素的唯一子元素，則為元素 E。

E:only-of-type 如果 E 是其父元素的直接子元素中唯一類型的 E 元素，則為元素 E。

說明：子元素與類型

在使用 nth-of-type 和 nth-child 的結構選擇器時，重要的是要理解在這種情況下“子元素”和“類型”的含義。 “子元素”查看所有匹配計數的子元素，並檢查前驅是否匹配。 “類型”首先查看所有匹配前驅的元素，然後根據計數進行匹配。

對於 p:nth-child(3n)，瀏覽器查看父元素的每個第三個子元素。如果該子元素是 p，則匹配；如果不是，則不匹配。對於 p:nth-of-type(3n)，瀏覽器查看父元素的所有 p 子元素，並匹配每三個 p。

結構性偽類基於父元素，並為每個新的父元素重新開始計數。它們只查看作為父元素直接子元素的元素。文本節點不是方程式的一部分。

E:empty 沒有子元素的元素；這包括文本節點，因此

hello

和

將不會與 p:empty 匹配，但

和

將匹配。此選擇器還匹配空元素或無效元素，例如

和。 E:lang(en) 使用雙字母縮寫（例如 en）表示的語言中的元素。與 E:[lang|=en] 不同（其中 lang 屬性必須作為元素 E 的屬性存在），如果在元素本身或任何祖先上聲明了語言，則 E:lang(en) 將匹配 E。

E:not(exception) 這特別有用：它將選擇不匹配括號中選擇器的元素。

帶有 :not 偽類的選擇器匹配冒號左側的所有內容，然後從該匹配組中排除也匹配冒號右側內容的元素。左側匹配優先。例如，p:not(.copyright) 將首先匹配文檔中的所有段落，然後從該集合中排除也具有版權類的所有段落。您可以將多個 :not 偽類連接在一起。 input:not([type=checkbox]):not([type=radio]) 將匹配頁面上的所有輸入元素，但類型為複選框或單選按鈕的元素除外。

結構性偽類的常見問題解答

結構性偽類的不同類型是什麼？

結構性偽類是 CSS 偽類的一個子集，允許您根據元素在文檔樹中的位置來選擇和設置元素的樣式。它們包括 :root、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-child、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type 和 :empty。這些偽類中的每一個都有一個獨特的功能，允許更精確地設置 HTML 元素的樣式。

`:nth-child()` 偽類是如何工作的？

:nth-child() 偽類根據元素在一組同級元素中的位置來匹配元素。它接受一個參數，該參數可以是數字、關鍵字或公式。例如，:nth-child(2) 將選擇其父元素的第二個子元素，而 :nth-child(odd) 或 :nth-child(2n 1) 將選擇所有奇數編號的子元素。

`:nth-of-type()` 和 `:nth-child()` 之間的區別是什麼？

雖然 :nth-of-type() 和 :nth-child() 都根據元素的位置選擇元素，但它們在計算這些位置的方式上有所不同。 :nth-child() 將所有元素都視為同級元素，而不管其類型如何，而 :nth-of-type() 只計算相同類型的元素。例如，如果您有一個包含li 和p 元素的列表，:nth-child() 將計算這兩種類型的元素，而:nth-of-type() 將只計算li 或p 元素，具體取決於您指定的元素。