jQuery | :nth-last-child() 选择器

简介

在 JQuery 中，:nth-last-child() 选择器用来选取父元素中倒数第 N 个子元素。和 :nth-child() 基本相似，只是从结尾开始数，而不是从开头数。

语法

:nth-last-child(index/even/odd)

• index： 必须。整数值，表示要选取的子元素的位置，从结尾开始数，可为负数。
• even：选取父元素中偶数位置的子元素。
• odd：选取父元素中奇数位置的子元素。

示例

选取最后一个子元素

选取一个列表中的最后一个 li 元素：

$('li:nth-last-child(1)').css('color', 'red');

上述代码将选取最后一个 li 元素，并将它的字体颜色设置为红色。

选取第四个到最后一个元素

选取一个列表中的第四个到最后一个 li 元素：

$('li:nth-last-child(n+4)').css('color', 'green');

上述代码将选取第四个到最后一个 li 元素，并将它们的字体颜色设置为绿色。

选取偶数位置子元素

选取一个列表中所有偶数位置的 li 元素：

$('li:nth-last-child(even)').css('background-color', 'yellow');

上述代码将选取所有偶数位置的 li 元素，并将它们的背景色设置为黄色。

总结

使用 :nth-last-child() 选择器可以方便地选取父元素中倒数第 N 个子元素。它类似于 :nth-child() 选择器，但是从结尾开始数。语法简单，易于使用。