css选择器nth-last-child

:nth-last-child() 是一个 CSS 伪类选择器，用于选择父元素下的倒数第 n 个子元素。它的语法如下：

:nth-last-child(n)

其中，n 是一个整数，表示要选择的倒数第几个子元素。

举个例子，如果我们有一个父元素包含 6 个子元素，我们可以使用 :nth-last-child(2) 来选中倒数第二个子元素。

.parent div:nth-last-child(2) {
  /* 样式 */
}

在上述示例中，只有倒数第二个子元素会应用样式。

还可以通过使用关键字来选择特定的子元素。例如，:nth-last-child(odd) 选择倒数第奇数个子元素，:nth-last-child(even) 选择倒数第偶数个子元素。

希望这能帮助到你！如果你有任何其他问题，请随时提问。

相关问题

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

:nth-child(n)和:nth-last-child(n)选择器都是CSS3中的伪类选择器，用于选择元素中的特定位置。

:nth-child(n)选择器选取父元素中第n个子元素。例如，:nth-child(2)会选取父元素中的第二个子元素。

:nth-last-child(n)选择器也是选取父元素中的第n个子元素，但是是从最后一个子元素开始计算的。例如，:nth-last-child(2)会选取父元素中的倒数第二个子元素。

这两个选择器也支持一些关键词：

- even：选取偶数位置的子元素
- odd：选取奇数位置的子元素
- n：选取任意位置的子元素

示例：

以下是一个HTML列表：

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>

使用:nth-child(n)选择器可以选取特定位置的项：

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

这个样式规则将把第二项的文本颜色设为红色。

使用:nth-last-child(n)选择器同样可以选取特定位置的项：

ul li:nth-last-child(2) {
background-color: yellow;
}

这个样式规则将把倒数第二项的背景颜色设为黄色。

使用关键词even和odd可以选取偶数或奇数位置的项：

ul li:nth-child(even) {
background-color: lightgray;
}

这个样式规则将把列表中偶数项的背景颜色设为浅灰色。

ul li:nth-child(odd) {
background-color: lightblue;
}

这个样式规则将把列表中奇数项的背景颜色设为浅蓝色。

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)的条件，因此最后一个子元素会变为蓝色。