nth-last-child

(n)与:last-child(n)有什么区别？

:nth-last-child(n)与:last-child(n)都是CSS选择器中的伪类。它们的区别在于它们匹配的位置不同。

:nth-last-child(n)表示选中某个元素在它的父元素中的倒数第N个子元素，而:last-child(n)表示选中某个元素在它的父元素中的最后一个子元素。

举个例子，假设某个ul元素中有5个li元素，它们的选择器如下：

:nth-last-child(2) {
color: red;
}

:last-child(2) {
color: blue;
}

则只有倒数第二个li元素（即倒数第二个子元素）会变为红色，而倒数第二个子元素和最后一个子元素都满足:last-child(2)的条件，因此最后一个子元素会变为蓝色。

相关问题

使用:nth-child(n)和:nth-last-child(n)选择器

:nth-child(n)选择器用于选取某个元素的父元素下的第n个子元素。例如，如果我们想选取一个ul元素下的第二个li元素，可以使用以下代码：

ul li:nth-child(2) {
  /* 样式 */
}

:nth-last-child(n)选择器也用于选取某个元素的父元素下的第n个子元素，但是它是从后往前数的。例如，如果我们想选取一个ul元素下的倒数第二个li元素，可以使用以下代码：

ul li:nth-last-child(2) {
  /* 样式 */
}

需要注意的是，如果要选择所有的子元素，可以使用nth-child(n)或者nth-last-child(n)中n为正无穷大或者负无穷大的情况，例如：

ul li:nth-child(n) {
  /* 选择所有子元素 */
}

ul li:nth-last-child(n) {
  /* 选择所有子元素 */
}

:nth-last-child

:nth-last-child(n)选择器匹配父元素的倒数第n个子元素，无论其类型如何。这个选择器从最后一个子元素开始计数。例如，:nth-last-child(2)将匹配父元素的倒数第二个子元素。

以下是一个示例，演示如何使用:nth-last-child(n)选择器：

<style>
    p:nth-last-child(2) {
        color: red;
    }
</style>

<div>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</div>

在上面的示例中，选择器:nth-last-child(2)将选择父元素的倒数第二个子元素，即第三个段落。所以第三个段落的文本将显示为红色。