在css中如何用nth-last-of-type选中倒数元素-css教程-PHP中文网

在css中如何用nth-last-of-type选中倒数元素

P粉602998670

发布： 2025-10-26 11:41:03

原创

676人浏览过

:nth-last-of-type伪类可从后往前匹配同类型元素，n为数字或公式；如p:nth-last-of-type(1)选最后一个p，li:nth-last-of-type(-n+2)选最后两个li，常用于无需class的样式控制。

在css中如何用nth-last-of-type选中倒数元素

在 CSS 中，:nth-last-of-type 是一个非常实用的伪类选择器，它可以从父元素的子元素中，按类型从后往前匹配符合条件的元素。如果你想选中“倒数”某个位置的元素，可以结合这个伪类使用数字或公式来实现。

element:nth-last-of-type(n) 其中 n 可以是一个数字、关键字或公式（如 1、2、2n+1 等），表示从最后一个同类型元素开始向前计数。

注意： 这个选择器是基于“元素类型”的，也就是说它只会考虑同类型的标签（比如所有 p 标签或所有 li 标签）。

1. 选中倒数第一个指定类型的元素

p:nth-last-of-type(1) 这会选中最后一个 p 元素。

2. 选中倒数第二个指定类型的元素

立即学习“前端免费学习笔记（深入）”；

li:nth-last-of-type(2) 这会选中倒数第二个 li 元素。

3. 选中倒数第 n 个之后的所有元素

百度文心百中

百度大模型语义搜索体验中心

div:nth-last-of-type(-n+3) 这会选中最后 3 个 div 元素。

4. 隔一选一，从倒数开始（奇偶倒序）

tr:nth-last-of-type(2n) 这会从后往前选中偶数位置的 tr（即倒数第 2、4、6... 个）。

假设你有一个列表：

你想给倒数两个 li 加上特殊样式：

li:nth-last-of-type(-n+2) {
background-color: #f0f0f0;
}

这样，Item 4 和 Item 5 就会被选中并应用背景色。

:nth-last-of-type 是按标签类型匹配的，如果中间夹杂其他标签，可能会影响结果。例如，在 p 之间插入 div，那么 p:nth-last-of-type(1) 依然会找最后一个 p，跳过其他类型。

基本上就这些。合理使用 :nth-last-of-type 能让你更灵活地控制页面中靠后的特定元素，无需添加 class 或 JS。

以上就是在css中如何用nth-last-of-type选中倒数元素的详细内容，更多请关注php中文网其它相关文章！

大家都在看：