CSS 選擇器：基于元素在文檔子樹中位置的偽類選擇
核心要點
- CSS 提供了被稱為子索引偽類的選擇器，用于根據(jù)元素在文檔子樹中的位置匹配元素。這些包括
:first-child、:last-child、:only-child、:nth-child()和:nth-last-child()。 -
:nth-child()和:nth-last-child()偽類是函數(shù)式的，可以接受odd關(guān)鍵字、even關(guān)鍵字、整數(shù)或An B形式的參數(shù)，其中 A 是步長間隔，B 是偏移量，n 是正整數(shù)。 -
:only-child偽類如果元素是另一個元素的唯一子元素則匹配該元素。<code>:empty 偽類可以選擇沒有子元素的元素，甚至連空格也沒有。 - CSS 提供了類型化的子索引偽類，它們根據(jù)索引值匹配元素，但僅限于特定類型的元素。這些包括
:first-of-type、:last-of-type、:only-of-type、:nth-of-type()和:nth-last-of-type()。
CSS 還提供選擇器，用于根據(jù)元素在文檔子樹中的位置匹配元素。這些被稱為子索引偽類，因為它們依賴于元素的位置或順序，而不是它的類型、屬性或 ID。共有五個：
:first-child:last-child:only-child:nth-child():nth-last-child()
:first-child 和 :last-child
正如您從名稱中猜到的那樣，:first-child 和 :last-child 偽類可以用來選擇作為節(jié)點（元素）的第一個或最后一個子元素的元素。與其他偽類一樣，當由簡單選擇器限定時，: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>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。下圖顯示了結(jié)果。
:nth-child() 和 :nth-last-child()
能夠選擇文檔的第一個和最后一個子元素是很好的。但是，如果我們想選擇奇數(shù)或偶數(shù)元素呢？也許我們想選擇文檔子樹中的第六個元素，或者將樣式應用于每三個元素。這就是 :nth-child() 和 :nth-last-child() 偽類發(fā)揮作用的地方。
與 :not() 一樣，:nth-child() 和 :nth-last-child() 也是函數(shù)式偽類。它們接受一個參數(shù)，該參數(shù)應該是：
odd關(guān)鍵字even關(guān)鍵字- 一個整數(shù)，例如 2 或 8，或者
An B形式的參數(shù)，其中 A 是步長間隔，B 是偏移量，n 是表示正整數(shù)的變量。
最后一項有一定的復雜性。我們稍后再討論它。
:nth-child() 和 :nth-last-child() 之間的區(qū)別是什么？起點：:nth-child() 向前計數(shù)，:nth-last-child() 向后計數(shù)。CSS 索引使用計數(shù)數(shù)字，從 1 開始而不是從 0 開始。
:nth-child() 和 :nth-last-child() 都可用于交替模式。創(chuàng)建斑馬紋表格行顏色是完美的用例。下面的 CSS 為偶數(shù)編號的表格行提供了一個淺藍灰色的背景，其結(jié)果可以在下圖中看到：
<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>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 會反轉(zhuǎn)此條帶，因為計數(shù)從底部開始，如下所示。
如何嘗試使用更復雜參數(shù)的一些復雜示例？我們將從下面顯示的文檔開始，該文檔包含 20 個項目。
使用 :nth-child() 和 :nth-last-child()，我們可以選擇特定位置的單個子元素。我們可以選擇特定位置之后的所有子元素，或者我們可以通過倍數(shù)選擇元素，并帶有一個偏移量。讓我們更改第六個項目的背景顏色：
<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>List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
這給了我們下面的結(jié)果。
但是如果我們想選擇每三個元素呢？這就是 An B 語法發(fā)揮作用的地方：
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
同樣，A 是步長間隔。它幾乎就像 n 的乘數(shù)，n 從 1 開始。因此，如果 A = 3，則 3n 將匹配第 3、6、9 等元素。這正是發(fā)生的情況，正如您在下面看到的。
事情變得更有趣的地方來了。我們可以使用 :nth-child() 和 :nth-last-child() 來選擇某個點之后的所有元素。讓我們嘗試選擇除前七個元素之外的所有元素：
.item:nth-child(6) {
background: #e91e63;
}
這里沒有步長值。因此，n 8 匹配從第八個元素開始的每個元素 n，如下所示。
注意：負偏移量
負偏移量和范圍值也是有效的。使用 :nth-child(-n 8) 將反轉(zhuǎn)我們的選擇，并匹配前八個元素。
我們還可以使用偏移量和步長值來選擇每三個元素，從第五個開始：
.item:nth-child(3n) {
background: #e91e63;
}
您可以在下圖中看到此選擇器的結(jié)果。
: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 偽類，它不能包含任何其他內(nèi)容——甚至空格也不行。換句話說，<code><p></p><p> </p> 將匹配，但 <code>:empty :not() 將不匹配。有時，所見即所得 (WYSIWYG) 編輯器會將空 p 元素插入到您的內(nèi)容中。您可以將 p:not(:empty) 與
。
通過其索引選擇特定類型的元素p:nth-last-child(2)
選擇每個作為其父元素的倒數(shù)第二個元素的 p 元素。
在本節(jié)中，我們將討論類型化的子索引偽類。這些偽類也根據(jù)其索引值匹配元素；但是，匹配僅限于特定類型的元素。例如，選擇第五個 p 元素，或者偶數(shù)索引的 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)這些偽類與子索引偽類之間的區(qū)別是細微的。其中
匹配所有 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>List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>，我們可以選擇匹配選擇器的第一個元素。我們?nèi)绾螢榈谝粋€ p 元素提供一個青檸綠色的背景：
這將匹配每個作為其父元素的第一個 p 元素的 p 元素，如下所示。
:last-of-type
偽類的作用類似，它匹配其父元素的最后一個此類元素，如下所示。但是，如果元素是其父元素的:only-of-type唯一
讓我們再看一個使用 :first-of-type 的示例，但這次使用偽元素。還記得本章前面提到的 ::first-letter 偽元素嗎？好吧，正如您所看到的，它為應用它的每個元素創(chuàng)建了一個初始大寫字母。我們不妨更進一步，將這個初始大寫字母限制在第一個段落中：
<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>List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
如下圖所示，現(xiàn)在我們的段落將有一個初始大寫字母，即使它前面有標題。
使用 :nth-of-type 和 :nth-last-of-type
:nth-of-type() 和 :nth-last-of-type() 也是函數(shù)式偽類。它們接受與 :nth-child() 和 :nth-last-child() 相同的參數(shù)。但與 :first-of-type 和 :last-of-type 一樣，索引解析為相同類型的元素。例如，要選擇第一個 p 元素和每個后續(xù)的 p 元素，我們可以將 odd 關(guān)鍵字與 :nth-of-type() 一起使用：
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
正如您從下圖中看到的，這只會匹配奇數(shù)編號的 p 元素，而不是奇數(shù)編號的子元素。
類似地，使用 :nth-last-of-type(even) 選擇偶數(shù)編號的 p 元素，但計數(shù)從文檔中的最后一個 p 元素開始——在本例中是項目 18（如下所示）。
如果這仍然看起來很模糊，請使用 Paul Maloney 的 Nth-Test 工具，或查看 Nth Master 上的示例。這兩個項目都是學習更多關(guān)于這些偽類的極好方法。
[5] 此 An B 語法在 CSS 語法模塊級別 3 中進行了描述。
關(guān)于 CSS 偽類和基于索引的元素樣式的常見問題解答
什么是 CSS 偽類？
CSS 偽類是添加到選擇器中的關(guān)鍵字，用于指定所選元素的特殊狀態(tài)。例如，:hover 可用于在用戶的指針懸停在按鈕上時更改按鈕的顏色。偽類與類和 ID 一起，是一種在不更改 HTML 標記的情況下將樣式應用于元素的方法。
:nth-child 偽類是如何工作的？
:nth-child 偽類根據(jù)元素在一組同級元素中的位置匹配元素。它使用類似函數(shù)的語法 :nth-child(an b)，其中“a”和“b”是整數(shù)值?！皀”是從 0 開始的計數(shù)器，并且對于每個元素都會增加 1 的增量?！癮n b”表示要選擇的元素，從第一個元素開始 (b=1)。
:nth-child 和 :nth-of-type 之間的區(qū)別是什么？
:nth-child 根據(jù)元素在其所有同級元素中的位置匹配元素，而 :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，它不選擇任何元素。
如何選擇每個偶數(shù)或奇數(shù)元素？
您可以將“even”和“odd”關(guān)鍵字與 :nth-child 一起使用，以選擇每個偶數(shù)或奇數(shù)元素。例如，:nth-child(even) 將選擇從第一個元素開始的每個第二個元素。
我可以將 :nth-child 與其他偽類一起使用嗎？
是的，您可以將 :nth-child 與其他偽類組合使用。例如，:nth-child(2):hover 將在用戶的指針懸停在第二個子元素上時應用樣式。
:nth-child 和 :nth-of-type 之間是否存在性能差異？
在大多數(shù)情況下，性能差異可以忽略不計。但是，在處理大量元素時，:nth-of-type 可能稍快一些，因為它只考慮相同類型的同級元素。
我可以將 :nth-child 與偽元素一起使用嗎？
不可以，偽元素不能與 :nth-child 一起使用，因為它們不被認為是文檔樹的一部分。
:nth-child 是否存在瀏覽器兼容性問題？
所有現(xiàn)代瀏覽器都很好地支持 :nth-child。但是，Internet Explorer 8 或更早版本不支持它。對于這些瀏覽器，您可能需要使用 JavaScript 或 jQuery 來實現(xiàn)類似的效果。
所有圖片均保持原格式和位置。
以上是CSS偽級：基于其索引的樣式元素的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
什么是'渲染障礙CSS”？
Jun 24, 2025 am 12:42 AM
CSS會阻塞頁面渲染是因為瀏覽器默認將內(nèi)聯(lián)和外部CSS視為關(guān)鍵資源，尤其是使用引入的樣式表、頭部大量內(nèi)聯(lián)CSS以及未優(yōu)化的媒體查詢樣式。1.提取關(guān)鍵CSS并內(nèi)嵌至HTML；2.延遲加載非關(guān)鍵CSS通過JavaScript；3.使用media屬性優(yōu)化加載如打印樣式；4.壓縮合并CSS減少請求。建議使用工具提取關(guān)鍵CSS，結(jié)合rel="preload"異步加載，合理使用media延遲加載，避免過度拆分與復雜腳本控制。
外部與內(nèi)部CSS：最好的方法是什么？
Jun 20, 2025 am 12:45 AM
thebestapphachforcssdepprodsontheproject'sspefificneeds.forlargerprojects，externalcsSissBetterDuoSmaintoMaintainability andReusability; forsMallerProjectsorsingle-pageApplications，InternaltCsmightBemoresobleable.InternalCsmightBemorese.it.it'sclucialtobalancepopryseceneceenceprodrenceprodrenceNeed
我的CSS必須在較低的情況下嗎？
Jun 19, 2025 am 12:29 AM
否，CSSDOESNOTHAVETOBEINLOWERCASE.CHOMENDENS，使用flowercaseisrecommondendendending：1）一致性和可讀性，2）避免使用促進性技術(shù)，3）潛在的Performent FormanceBenefits，以及4）RightCollaboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraborationWithInteams。
CSS案例靈敏度：了解重要的
Jun 20, 2025 am 12:09 AM
cssismostlycaseminemintiment，buturlsandfontfamilynamesarecase敏感。1）屬性和valueslikeColor：紅色; prenotcase-sensive.2）urlsmustmustmatchtheserver'server'scase，例如
什么是AutoPrefixer，它如何工作？
Jul 02, 2025 am 01:15 AM
Autoprefixer是一個根據(jù)目標瀏覽器范圍自動為CSS屬性添加廠商前綴的工具。1.它解決了手動維護前綴易出錯的問題；2.通過PostCSS插件形式工作，解析CSS、分析需加前綴的屬性、依配置生成代碼；3.使用步驟包括安裝插件、設(shè)置browserslist、在構(gòu)建流程中啟用；4.注意事項有不手動加前綴、保持配置更新、非所有屬性都加前綴、建議配合預處理器使用。
什么是CSS計數(shù)器？
Jun 19, 2025 am 12:34 AM
csscounterscanautomationallymentermentermentections和lists.1）usecounter-ensettoInitializize，反插入式發(fā)芽，andcounter（）orcounters（）
CSS：何時重要（何時不）？
Jun 19, 2025 am 12:27 AM
在CSS中，選擇器和屬性名不區(qū)分大小寫，而值、命名顏色、URL和自定義屬性則區(qū)分大小寫。1.選擇器和屬性名不區(qū)分大小寫，例如background-color和Background-Color相同。2.值中的十六進制顏色不區(qū)分大小寫，但命名顏色區(qū)分大小寫，如red有效而Red無效。3.URL區(qū)分大小寫，可能導致文件加載問題。4.自定義屬性（變量）區(qū)分大小寫，使用時需注意大小寫一致。
什么是圓錐級函數(shù)？
Jul 01, 2025 am 01:16 AM
theconic-Gradient（）functionIncsscreatesCircularGradientsThatRotateColorStopSaroundAcentralPoint.1.IsidealForPieCharts，ProgressIndicators，colordichers，colorwheels和decorativeBackgrounds.2.itworksbysbysbysbydefindefingincolordefingincolorstopsatspecificains off.
