CSS nth-last-child詳解

一、基本介紹

CSS中的nth-last-child選擇器用於選擇某個元素的所有兄弟元素中的倒數第n個元素，其中n可以是一個數字、一個算式或關鍵字even(偶數)、odd(奇數)。

我們可以將nth-last-child選擇器與其他CSS選擇器組合使用，以實現更精細的選擇。

二、使用示例

下面的示例演示了如何使用nth-last-child選擇器:

/*選擇所有div元素的倒數第二個子元素*/
div:nth-last-child(2) {
  background-color: yellow;
}

/*選擇所有具有偶數編號的段落*/
p:nth-last-child(even) {
  background-color: green;
}

/*選擇所有具有奇數編號的段落*/
p:nth-last-child(odd) {
  background-color: red;
}

/*選擇每個表格中的最後一行*/
tr:last-child {
  background-color: gray;
}

/*選擇每個表格中的倒數第二行*/
tr:nth-last-child(2) {
  background-color: silver;
}

三、注意事項

以下是需要注意的一些事項：

1. 倒數計算方式

請注意，nth-last-child選擇器根據元素在其父元素中的倒數位置進行計數，而不是正數位置。因此，倒數第一個子元素實際上是該元素的第一個子元素。

例如，在下面的HTML代碼段中，第一個li元素是

中的倒數第四個元素：

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>

2. 組合選擇器

我們可以將nth-last-child選擇器與其他CSS選擇器組合使用，這樣可以實現更精細的選擇。

例如，使用 :first-child 和 :last-child 選擇器，我們可以選擇其父元素中的第一個子元素和最後一個子元素：

/*選擇每個表格的第一行和最後一行*/
tr:first-child,
tr:last-child {
  background-color: yellow;
}

3. 兼容性

請注意，nth-last-child選擇器在IE8及更早版本的Internet Explorer中不起作用。如果需要支持舊版瀏覽器，建議使用jQuery等JavaScript庫來實現相同的效果。

四、總結

nth-last-child選擇器是CSS中強大的選擇器之一，它可以幫助我們精確地選擇元素並應用樣式。我們可以將它與其他選擇器組合使用，以實現更複雜的選擇。需要注意的是，在某些瀏覽器中可能不支持該選擇器，需要進行兼容性處理。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/249103.html