成人免费乱码大片a毛片,国产chinese男男gay片,国产98在线

:nth-child() 和 :nth-last-child()

注意：負(fù)偏移量

:only-child

:empty

。

使用 :nth-of-type 和 :nth-last-of-type

關(guān)于 CSS 偽類和基于索引的元素樣式的常見(jiàn)問(wèn)題解答

什么是 CSS 偽類？

如何使用給定的類名選擇第一、第二或第三個(gè)元素？

我可以在 :nth-child 中使用負(fù)值嗎？

如何選擇每個(gè)偶數(shù)或奇數(shù)元素？

我可以將 :nth-child 與其他偽類一起使用嗎？

我可以將 :nth-child 與偽元素一起使用嗎？

首頁(yè)

web前端

css教程

CSS偽級(jí)：基于其索引的樣式元素

Lisa Kudrow

Feb 19, 2025 am 11:26 AM

CSS 選擇器：基于元素在文檔子樹(shù)中位置的偽類選擇

CSS Pseudo-classes: Styling Elements Based on Their Index

核心要點(diǎn)

CSS 提供了被稱為子索引偽類的選擇器，用于根據(jù)元素在文檔子樹(shù)中的位置匹配元素。這些包括 :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 是步長(zhǎng)間隔，B 是偏移量，n 是正整數(shù)。
:only-child 偽類如果元素是另一個(gè)元素的唯一子元素則匹配該元素。<code>:empty 偽類可以選擇沒(méi)有子元素的元素，甚至連空格也沒(méi)有。
CSS 提供了類型化的子索引偽類，它們根據(jù)索引值匹配元素，但僅限于特定類型的元素。這些包括 :first-of-type、:last-of-type、:only-of-type、:nth-of-type() 和 :nth-last-of-type()。

CSS 還提供選擇器，用于根據(jù)元素在文檔子樹(shù)中的位置匹配元素。這些被稱為子索引偽類，因?yàn)樗鼈円蕾囉谠氐奈恢没蝽樞颍皇撬念愋?、屬性?ID。共有五個(gè)：

:first-child
:last-child
:only-child
:nth-child()
:nth-last-child()

`:first-child` 和 `:last-child`

正如您從名稱中猜到的那樣，:first-child 和 :last-child 偽類可以用來(lái)選擇作為節(jié)點(diǎn)（元素）的第一個(gè)或最后一個(gè)子元素的元素。與其他偽類一樣，當(dāng)由簡(jiǎn)單選擇器限定時(shí)，: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>

您可以看到它在下面的圖中是什么樣子。

CSS Pseudo-classes: Styling Elements Based on Their Index

因?yàn)?:first-child 沒(méi)有限定，h2 元素和第一個(gè) li 元素都是粉紅色的。畢竟，h2 是 body 的第一個(gè)子元素，li 是 ul 元素的第一個(gè)子元素。但是為什么剩下的 li 元素是綠色的呢？那是因?yàn)?:last-child 也未限定，ul 是 body 的最后一個(gè)子元素。我們實(shí)際上鍵入了 *:first-child 和 *:last-child。

如果我們通過(guò)添加一個(gè)簡(jiǎn)單的選擇器來(lái)限定 :first-child 和 :last-child，那么這一切就更有意義了。讓我們將選擇限制為列表項(xiàng)。將 :first-child 更改為 li:first-child，將 :last-child 更改為 li:last-child。下圖顯示了結(jié)果。

CSS Pseudo-classes: Styling Elements Based on Their Index

`:nth-child()` 和 `:nth-last-child()`

能夠選擇文檔的第一個(gè)和最后一個(gè)子元素是很好的。但是，如果我們想選擇奇數(shù)或偶數(shù)元素呢？也許我們想選擇文檔子樹(shù)中的第六個(gè)元素，或者將樣式應(yīng)用于每三個(gè)元素。這就是 :nth-child() 和 :nth-last-child() 偽類發(fā)揮作用的地方。

與 :not() 一樣，:nth-child() 和 :nth-last-child() 也是函數(shù)式偽類。它們接受一個(gè)參數(shù)，該參數(shù)應(yīng)該是：

odd 關(guān)鍵字
even 關(guān)鍵字
一個(gè)整數(shù)，例如 2 或 8，或者
An B 形式的參數(shù)，其中 A 是步長(zhǎng)間隔，B 是偏移量，n 是表示正整數(shù)的變量。

最后一項(xiàng)有一定的復(fù)雜性。我們稍后再討論它。

:nth-child() 和 :nth-last-child() 之間的區(qū)別是什么？起點(diǎn)：:nth-child() 向前計(jì)數(shù)，:nth-last-child() 向后計(jì)數(shù)。CSS 索引使用計(jì)數(shù)數(shù)字，從 1 開(kāi)始而不是從 0 開(kāi)始。

:nth-child() 和 :nth-last-child() 都可用于交替模式。創(chuàng)建斑馬紋表格行顏色是完美的用例。下面的 CSS 為偶數(shù)編號(hào)的表格行提供了一個(gè)淺藍(lán)灰色的背景，其結(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>

CSS Pseudo-classes: Styling Elements Based on Their Index

將 :nth-child 切換為 :nth-last-child 會(huì)反轉(zhuǎn)此條帶，因?yàn)橛?jì)數(shù)從底部開(kāi)始，如下所示。

CSS Pseudo-classes: Styling Elements Based on Their Index

如何嘗試使用更復(fù)雜參數(shù)的一些復(fù)雜示例？我們將從下面顯示的文檔開(kāi)始，該文檔包含 20 個(gè)項(xiàng)目。

CSS Pseudo-classes: Styling Elements Based on Their Index

使用 :nth-child() 和 :nth-last-child()，我們可以選擇特定位置的單個(gè)子元素。我們可以選擇特定位置之后的所有子元素，或者我們可以通過(guò)倍數(shù)選擇元素，并帶有一個(gè)偏移量。讓我們更改第六個(gè)項(xià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>

這給了我們下面的結(jié)果。

CSS Pseudo-classes: Styling Elements Based on Their Index

但是如果我們想選擇每三個(gè)元素呢？這就是 An B 語(yǔ)法發(fā)揮作用的地方：

tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}

同樣，A 是步長(zhǎng)間隔。它幾乎就像 n 的乘數(shù)，n 從 1 開(kāi)始。因此，如果 A = 3，則 3n 將匹配第 3、6、9 等元素。這正是發(fā)生的情況，正如您在下面看到的。

CSS Pseudo-classes: Styling Elements Based on Their Index

事情變得更有趣的地方來(lái)了。我們可以使用 :nth-child() 和 :nth-last-child() 來(lái)選擇某個(gè)點(diǎn)之后的所有元素。讓我們嘗試選擇除前七個(gè)元素之外的所有元素：

.item:nth-child(6) {
  background: #e91e63;
}

這里沒(méi)有步長(zhǎng)值。因此，n 8 匹配從第八個(gè)元素開(kāi)始的每個(gè)元素 n，如下所示。

CSS Pseudo-classes: Styling Elements Based on Their Index

注意：負(fù)偏移量

負(fù)偏移量和范圍值也是有效的。使用 :nth-child(-n 8) 將反轉(zhuǎn)我們的選擇，并匹配前八個(gè)元素。

我們還可以使用偏移量和步長(zhǎng)值來(lái)選擇每三個(gè)元素，從第五個(gè)開(kāi)始：

.item:nth-child(3n) {
  background: #e91e63;
}

您可以在下圖中看到此選擇器的結(jié)果。

CSS Pseudo-classes: Styling Elements Based on Their Index

`:only-child`

如果元素是另一個(gè)元素的唯一子元素，則 :only-child 偽類匹配該元素。下面是兩個(gè)無(wú)序列表。第一個(gè)有一個(gè)項(xiàng)目，而第二個(gè)包含三個(gè)：

.item:nth-child(n+8) {
  background: #e91e63;
}

使用 li:only-child{color: #9c27b0;} 將選擇 Apple，因?yàn)樗俏覀兊谝粋€(gè)列表的唯一子元素。但是，第二個(gè)列表中的任何項(xiàng)目都不匹配，因?yàn)橛腥齻€(gè)同級(jí)元素。您可以看到它在下面的圖中是什么樣子。

CSS Pseudo-classes: Styling Elements Based on Their Index

<code>:empty

也可以使用 <code>:empty 偽類選擇沒(méi)有子元素的元素。當(dāng)我們說(shuō) <code>:empty 時(shí)，我們的意思是空。為了使元素匹配 <code>:empty 偽類，它不能包含任何其他內(nèi)容——甚至空格也不行。換句話說(shuō)，<code>  將匹配，但 <code>:empty :not() 將不匹配。有時(shí)，所見(jiàn)即所得 (WYSIWYG) 編輯器會(huì)將空 p 元素插入到您的內(nèi)容中。您可以將 p:not(:empty) 與

偽類組合使用，以避免將樣式應(yīng)用于這些元素；例如

。

通過(guò)其索引選擇特定類型的元素p:nth-last-child(2)

上一節(jié)中討論的偽類如果元素占據(jù)文檔子樹(shù)中的給定位置，則匹配該元素。例如，

選擇每個(gè)作為其父元素的倒數(shù)第二個(gè)元素的 p 元素。

在本節(jié)中，我們將討論類型化的子索引偽類。這些偽類也根據(jù)其索引值匹配元素；但是，匹配僅限于特定類型的元素。例如，選擇第五個(gè) 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ū)別是細(xì)微的。其中

僅當(dāng)它是 p 元素時(shí)才匹配第五個(gè)項(xiàng)目，

匹配所有 p 元素，然后在這些元素中找到第五個(gè) p 元素。

讓我們從一個(gè)稍微不同的文檔開(kāi)始。它仍然有 20 個(gè)項(xiàng)目，但其中一些是 p 元素，一些是 div 元素。p 元素具有圓角，如下所示。 CSS Pseudo-classes: Styling Elements Based on Their Index

`: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>

，我們可以選擇匹配選擇器的第一個(gè)元素。我們?nèi)绾螢榈谝粋€(gè) p 元素提供一個(gè)青檸綠色的背景：

這將匹配每個(gè)作為其父元素的第一個(gè) p 元素的 p 元素，如下所示。 CSS Pseudo-classes: Styling Elements Based on Their Index

:last-of-type 偽類的作用類似，它匹配其父元素的最后一個(gè)此類元素，如下所示。但是，如果元素是其父元素的:only-of-type唯一

此類子元素，則將匹配該元素，如下所示。

CSS Pseudo-classes: Styling Elements Based on Their Index

讓我們?cè)倏匆粋€(gè)使用 :first-of-type 的示例，但這次使用偽元素。還記得本章前面提到的 ::first-letter 偽元素嗎？好吧，正如您所看到的，它為應(yīng)用它的每個(gè)元素創(chuàng)建了一個(gè)初始大寫字母。我們不妨更進(jìn)一步，將這個(gè)初始大寫字母限制在第一個(gè)段落中：

<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)在我們的段落將有一個(gè)初始大寫字母，即使它前面有標(biāo)題。

CSS Pseudo-classes: Styling Elements Based on Their Index

使用 `: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 一樣，索引解析為相同類型的元素。例如，要選擇第一個(gè) p 元素和每個(gè)后續(xù)的 p 元素，我們可以將 odd 關(guān)鍵字與 :nth-of-type() 一起使用：

tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}

正如您從下圖中看到的，這只會(huì)匹配奇數(shù)編號(hào)的 p 元素，而不是奇數(shù)編號(hào)的子元素。

CSS Pseudo-classes: Styling Elements Based on Their Index

類似地，使用 :nth-last-of-type(even) 選擇偶數(shù)編號(hào)的 p 元素，但計(jì)數(shù)從文檔中的最后一個(gè) p 元素開(kāi)始——在本例中是項(xiàng)目 18（如下所示）。

CSS Pseudo-classes: Styling Elements Based on Their Index

如果這仍然看起來(lái)很模糊，請(qǐng)使用 Paul Maloney 的 Nth-Test 工具，或查看 Nth Master 上的示例。這兩個(gè)項(xiàng)目都是學(xué)習(xí)更多關(guān)于這些偽類的極好方法。

^[5] 此 An B 語(yǔ)法在 CSS 語(yǔ)法模塊級(jí)別 3 中進(jìn)行了描述。

關(guān)于 CSS 偽類和基于索引的元素樣式的常見(jiàn)問(wèn)題解答

什么是 CSS 偽類？

CSS 偽類是添加到選擇器中的關(guān)鍵字，用于指定所選元素的特殊狀態(tài)。例如，:hover 可用于在用戶的指針懸停在按鈕上時(shí)更改按鈕的顏色。偽類與類和 ID 一起，是一種在不更改 HTML 標(biāo)記的情況下將樣式應(yīng)用于元素的方法。

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

:nth-child 偽類根據(jù)元素在一組同級(jí)元素中的位置匹配元素。它使用類似函數(shù)的語(yǔ)法 :nth-child(an b)，其中“a”和“b”是整數(shù)值。“n”是從 0 開(kāi)始的計(jì)數(shù)器，并且對(duì)于每個(gè)元素都會(huì)增加 1 的增量。“an b”表示要選擇的元素，從第一個(gè)元素開(kāi)始 (b=1)。

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

:nth-child 根據(jù)元素在其所有同級(jí)元素中的位置匹配元素，而 :nth-of-type 僅考慮相同類型同級(jí)元素中的位置。例如，p:nth-child(2) 如果它是 <code> 元素，則會(huì)選擇第二個(gè)子元素，而 p:nth-of-type(2) 將選擇第二個(gè) <code> 元素，而不管它在其他同級(jí)元素中的位置如何。