CSS偽級：基於其索引的樣式元素

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：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <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>
</code>

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

因為 :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 為偶數編號的表格行提供了一個淺藍灰色的背景，其結果可以在下圖中看到：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <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>
</code>

將 :nth-child 切換為 :nth-last-child 會反轉此條帶，因為計數從底部開始，如下所示。

如何嘗試使用更複雜參數的一些複雜示例？我們將從下面顯示的文檔開始，該文檔包含 20 個項目。

使用 :nth-child() 和 :nth-last-child()，我們可以選擇特定位置的單個子元素。我們可以選擇特定位置之後的所有子元素，或者我們可以通過倍數選擇元素，並帶有一個偏移量。讓我們更改第六個項目的背景顏色：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <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>
</code>

這給了我們下面的結果。

但是如果我們想選擇每三個元素呢？這就是 An B 語法發揮作用的地方：

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

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

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

<code class="language-css">.item:nth-child(6) {
  background: #e91e63;
}</code>

這裡沒有步長值。因此，n 8 匹配從第八個元素開始的每個元素 n，如下所示。

注意：負偏移量

負偏移量和範圍值也是有效的。使用 :nth-child(-n 8) 將反轉我們的選擇，並匹配前八個元素。

我們還可以使用偏移量和步長值來選擇每三個元素，從第五個開始：

<code class="language-css">.item:nth-child(3n) {
  background: #e91e63;
}</code>

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

:only-child

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

<code class="language-css">.item:nth-child(n+8) {
  background: #e91e63;
}</code>

使用 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 元素，然後在這些元素中找到第五個 p 元素。

讓我們從一個稍微不同的文檔開始。它仍然有 20 個項目，但其中一些是 p 元素，一些是 div 元素。 p 元素具有圓角，如下所示。

:first-of-type :last-of-type使用 :only-type、

和

:first-of-type

使用

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <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>
</code>

，我們可以選擇匹配選擇器的第一個元素。我們如何為第一個 p 元素提供一個青檸綠色的背景：

這將匹配每個作為其父元素的第一個 p 元素的 p 元素，如下所示。

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

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

讓我們再看一個使用 :first-of-type 的示例，但這次使用偽元素。還記得本章前面提到的 ::first-letter 偽元素嗎？好吧，正如您所看到的，它為應用它的每個元素創建了一個初始大寫字母。我們不妨更進一步，將這個初始大寫字母限制在第一個段落中：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <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>
</code>

如下圖所示，現在我們的段落將有一個初始大寫字母，即使它前面有標題。

使用 :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() 一起使用：

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

正如您從下圖中看到的，這只會匹配奇數編號的 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中文網其他相關文章！