CSS 選擇器：基於元素在文檔子樹中位置的偽類選擇
核心要點
- CSS 提供了被稱為子索引偽類的選擇器，用於根據元素在文檔子樹中的位置匹配元素。這些包括
:first-child、:last-child、:only-child、:nth-child()和:nth-last-child()。 -
:nth-child()和:nth-last-child()偽類是函數式的，可以接受odd關鍵字、even關鍵字、整數或An B形式的參數，其中A 是步長間隔，B 是偏移量，n 是正整數。 -
:only-child偽類如果元素是另一個元素的唯一子元素則匹配該元素。 <code>:empty 偽類可以選擇沒有子元素的元素，甚至連空格也沒有。 - CSS 提供了類型化的子索引偽類，它們根據索引值匹配元素，但僅限於特定類型的元素。這些包括
:first-of-type、:last-of-type、:only-of-type、:nth-of-type()和:nth-last-of-type()。
CSS 還提供選擇器，用於根據元素在文檔子樹中的位置匹配元素。這些被稱為子索引偽類，因為它們依賴於元素的位置或順序，而不是它的類型、屬性或 ID。共有五個：
:first-child:last-child:only-child:nth-child():nth-last-child()
:first-child 和 :last-child
正如您從名稱中猜到的那樣，:first-child 和 :last-child 偽類可以用來選擇作為節點（元素）的第一個或最後一個子元素的元素。與其他偽類一樣，當由簡單選擇器限定時，:first-child 和 :last-child 的副作用最少。
讓我們看一下下面的 HTML 和 CSS：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
您可以看到它在下面的圖中是什麼樣子。
因為 :first-child 沒有限定，h2 元素和第一個 li 元素都是粉紅色的。畢竟，h2 是 body 的第一個子元素，li 是 ul 元素的第一個子元素。但是為什麼剩下的 li 元素是綠色的呢？那是因為 :last-child 也未限定，ul 是 body 的最後一個子元素。我們實際上鍵入了 *:first-child 和 *:last-child。
如果我們通過添加一個簡單的選擇器來限定 :first-child 和 :last-child，那麼這一切就更有意義了。讓我們將選擇限制為列表項。將 :first-child 更改為 li:first-child，將 :last-child 更改為 li:last-child。下圖顯示了結果。
:nth-child() 和 :nth-last-child()
能夠選擇文檔的第一個和最後一個子元素是很好的。但是，如果我們想選擇奇數或偶數元素呢？也許我們想選擇文檔子樹中的第六個元素，或者將樣式應用於每三個元素。這就是 :nth-child() 和 :nth-last-child() 偽類發揮作用的地方。
與 :not() 一樣，:nth-child() 和 :nth-last-child() 也是函數式偽類。它們接受一個參數，該參數應該是：
-
odd關鍵字 -
even關鍵字 - 一個整數，例如 2 或 8，或者
-
An B形式的參數，其中 A 是步長間隔，B 是偏移量，n 是表示正整數的變量。
最後一項有一定的複雜性。我們稍後再討論它。
:nth-child() 和 :nth-last-child() 之間的區別是什麼？起點：:nth-child() 向前計數，:nth-last-child() 向後計數。 CSS 索引使用計數數字，從 1 開始而不是從 0 開始。
:nth-child() 和 :nth-last-child() 都可用於交替模式。創建斑馬紋表格行顏色是完美的用例。下面的 CSS 為偶數編號的表格行提供了一個淺藍灰色的背景，其結果可以在下圖中看到：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
將 :nth-child 切換為 :nth-last-child 會反轉此條帶，因為計數從底部開始，如下所示。
如何嘗試使用更複雜參數的一些複雜示例？我們將從下面顯示的文檔開始，該文檔包含 20 個項目。
使用 :nth-child() 和 :nth-last-child()，我們可以選擇特定位置的單個子元素。我們可以選擇特定位置之後的所有子元素，或者我們可以通過倍數選擇元素，並帶有一個偏移量。讓我們更改第六個項目的背景顏色：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
這給了我們下面的結果。
但是如果我們想選擇每三個元素呢？這就是 An B 語法發揮作用的地方：
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
同樣，A 是步長間隔。它幾乎就像 n 的乘數，n 從 1 開始。因此，如果 A = 3，則 3n 將匹配第 3、6、9 等元素。這正是發生的情況，正如您在下面看到的。
事情變得更有趣的地方來了。我們可以使用 :nth-child() 和 :nth-last-child() 來選擇某個點之後的所有元素。讓我們嘗試選擇除前七個元素之外的所有元素：
.item:nth-child(6) {
background: #e91e63;
}
這裡沒有步長值。因此，n 8 匹配從第八個元素開始的每個元素 n，如下所示。
注意：負偏移量
負偏移量和範圍值也是有效的。使用 :nth-child(-n 8) 將反轉我們的選擇，並匹配前八個元素。
我們還可以使用偏移量和步長值來選擇每三個元素，從第五個開始：
.item:nth-child(3n) {
background: #e91e63;
}
您可以在下圖中看到此選擇器的結果。
:only-child
如果元素是另一個元素的唯一子元素，則 :only-child 偽類匹配該元素。下面是兩個無序列表。第一個有一個項目，而第二個包含三個：
.item:nth-child(n+8) {
background: #e91e63;
}
使用 li:only-child{color: #9c27b0;} 將選擇 Apple，因為它是我們第一個列表的唯一子元素。但是，第二個列表中的任何項目都不匹配，因為有三個同級元素。您可以看到它在下面的圖中是什麼樣子。
<code>:empty
也可以使用 <code>:empty 偽類選擇沒有子元素的元素。當我們說 <code>:empty 時，我們的意思是空。為了使元素匹配 <code>:empty 偽類，它不能包含任何其他內容——甚至空格也不行。換句話說，<code><p></p><p> </p> 將匹配，但 <code>:empty :not() 將不匹配。有時，所見即所得 (WYSIWYG) 編輯器會將空 p 元素插入到您的內容中。您可以將 p:not(:empty) 與
。
通過其索引選擇特定類型的元素p:nth-last-child(2)
選擇每個作為其父元素的倒數第二個元素的 p 元素。
在本節中，我們將討論類型化的子索引偽類。這些偽類也根據其索引值匹配元素；但是，匹配僅限於特定類型的元素。例如，選擇第五個 p 元素，或者偶數索引的 h2 元素。
- 有五個這樣的偽類，其名稱與其非類型化對應物的名稱相同：
-
:first-of-type -
:last-of-type -
:only-of-type -
:nth-of-type() -
:nth-last-of-type()
p:nth-child(5)
p:nth-of-type(5)這些偽類與子索引偽類之間的區別是細微的。其中
匹配所有 p 元素，然後在這些元素中找到第五個 p 元素。
讓我們從一個稍微不同的文檔開始。它仍然有 20 個項目，但其中一些是 p 元素，一些是 div 元素。 p 元素具有圓角，如下所示。 
:first-of-type
:last-of-type使用 :only-type、
和 :first-of-type
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>，我們可以選擇匹配選擇器的第一個元素。我們如何為第一個 p 元素提供一個青檸綠色的背景：
這將匹配每個作為其父元素的第一個 p 元素的 p 元素，如下所示。 
:last-of-type
偽類的作用類似，它匹配其父元素的最後一個此類元素，如下所示。但是，如果元素是其父元素的:only-of-type唯一
讓我們再看一個使用 :first-of-type 的示例，但這次使用偽元素。還記得本章前面提到的 ::first-letter 偽元素嗎？好吧，正如您所看到的，它為應用它的每個元素創建了一個初始大寫字母。我們不妨更進一步，將這個初始大寫字母限制在第一個段落中：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
如下圖所示，現在我們的段落將有一個初始大寫字母，即使它前面有標題。
使用 :nth-of-type 和 :nth-last-of-type
:nth-of-type() 和 :nth-last-of-type() 也是函數式偽類。它們接受與 :nth-child() 和 :nth-last-child() 相同的參數。但與 :first-of-type 和 :last-of-type 一樣，索引解析為相同類型的元素。例如，要選擇第一個 p 元素和每個後續的 p 元素，我們可以將 odd 關鍵字與 :nth-of-type() 一起使用：
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
正如您從下圖中看到的，這只會匹配奇數編號的 p 元素，而不是奇數編號的子元素。
類似地，使用 :nth-last-of-type(even) 選擇偶數編號的 p 元素，但計數從文檔中的最後一個 p 元素開始——在本例中是項目 18（如下所示）。
如果這仍然看起來很模糊，請使用 Paul Maloney 的 Nth-Test 工具，或查看 Nth Master 上的示例。這兩個項目都是學習更多關於這些偽類的極好方法。
[5] 此 An B 語法在 CSS 語法模塊級別 3 中進行了描述。
關於 CSS 偽類和基於索引的元素樣式的常見問題解答
什麼是 CSS 偽類？
CSS 偽類是添加到選擇器中的關鍵字，用於指定所選元素的特殊狀態。例如，:hover 可用於在用戶的指針懸停在按鈕上時更改按鈕的顏色。偽類與類和 ID 一起，是一種在不更改 HTML 標記的情況下將樣式應用於元素的方法。
:nth-child 偽類是如何工作的？
:nth-child 偽類根據元素在一組同級元素中的位置匹配元素。它使用類似函數的語法 :nth-child(an b)，其中“a”和“b”是整數值。 “n”是從 0 開始的計數器，並且對於每個元素都會增加 1 的增量。 “an b”表示要選擇的元素，從第一個元素開始 (b=1)。
:nth-child 和 :nth-of-type 之間的區別是什麼？
:nth-child 根據元素在其所有同級元素中的位置匹配元素，而 :nth-of-type 僅考慮相同類型同級元素中的位置。例如，p:nth-child(2) 如果它是<code><p></p> 元素，則會選擇第二個子元素，而p:nth-of-type(2) 將選擇第二個<code><p></p> 元素，而不管它在其他同級元素中的位置如何。
如何使用給定的類名選擇第一、第二或第三個元素？
您可以將 :nth-child 偽類與類選擇器組合使用。例如，.myClass:nth-child(1) 將選擇具有類“myClass”的第一個元素。請記住，只有當元素是其父元素的第一個子元素時，這才能工作。
我可以在 :nth-child 中使用負值嗎？
不可以，:nth-child 不允許使用負值。您可以使用的最小值是 0，它不選擇任何元素。
如何選擇每個偶數或奇數元素？
您可以將“even”和“odd”關鍵字與 :nth-child 一起使用，以選擇每個偶數或奇數元素。例如，:nth-child(even) 將選擇從第一個元素開始的每個第二個元素。
我可以將 :nth-child 與其他偽類一起使用嗎？
是的，您可以將 :nth-child 與其他偽類組合使用。例如，:nth-child(2):hover 將在用戶的指針懸停在第二個子元素上時應用樣式。
:nth-child 和 :nth-of-type 之間是否存在性能差異？
在大多數情況下，性能差異可以忽略不計。但是，在處理大量元素時，:nth-of-type 可能稍快一些，因為它只考慮相同類型的同級元素。
我可以將 :nth-child 與偽元素一起使用嗎？
不可以，偽元素不能與 :nth-child 一起使用，因為它們不被認為是文檔樹的一部分。
:nth-child 是否存在瀏覽器兼容性問題？
所有現代瀏覽器都很好地支持 :nth-child。但是，Internet Explorer 8 或更早版本不支持它。對於這些瀏覽器，您可能需要使用 JavaScript 或 jQuery 來實現類似的效果。
所有圖片均保持原格式和位置。
以上是CSS偽級：基於其索引的樣式元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
揭開屏幕讀取器的神秘面紗：可訪問的表格和最佳實踐Mar 08, 2025 am 09:45 AM這是我們在形式可訪問性上進行的小型系列中的第三篇文章。如果您錯過了第二篇文章，請查看“以：focus-visible的管理用戶焦點”。在
使用智能表單框架創建JavaScript聯繫表格Mar 07, 2025 am 11:33 AM本教程演示了使用智能表單框架創建外觀專業的JavaScript表單（注意：不再可用）。 儘管框架本身不可用，但原理和技術仍然與其他形式的建築商相關。
將框陰影添加到WordPress塊和元素Mar 09, 2025 pm 12:53 PMCSS盒子陰影和輪廓屬性獲得了主題。讓我們查看一些在真實主題中起作用的示例，以及我們必須將這些樣式應用於WordPress塊和元素的選項。
使您的第一個自定義苗條過渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一種使組件輸入或離開文檔（包括自定義Svelte Transitions）時動畫組件的方法。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Dreamweaver CS6
視覺化網頁開發工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
