落静姑娘_3831
发布时间：2026-03-13 14:52:03
|702人浏览过
|来源于php中文网
原创
:nth-last-child(n) 按同级所有子元素倒序计数，无视标签类型；而 :nth-last-of-type(n) 仅对同类型标签倒序计数，更精准匹配目标元素。
它只对同级兄弟元素倒序计数，且必须是「同类型」或「无类型限制」才能匹配到目标。比如 <div> 里混着 <code><p></p> 和 <span></span>，nth-last-child(2) 会从所有子元素里倒数第2个算，不管标签名；但 nth-last-of-type(2) 才按标签分组倒数。
常见错误是以为 nth-last-child(1) 能选中最后一个 <li>，结果发现没生效——很可能因为最后一个子元素其实是
<button></button>，根本不是 <li>。
nth-last-of-type(n)
n 可以是正整数、表达式（如 2n+1）、甚至 0n+3 这种等价写法nth-last-child(-1) 会直接失效nth-last-child，但 IE8 及更早版本完全不认真实页面里，看似连续的列表常被空格、换行、注释干扰。HTML 中的空白符在解析时可能生成 Text 节点，导致实际子元素顺序和肉眼所见不一致。
例如这段代码：
立即学习“前端免费学习笔记（深入）”；
<ul> <li>A</li> <li>B</li> <li>C</li> </ul>
看起来有3个 <li>，但若写成：
<ul> <li>A</li> <li>B</li> <li>C</li> </ul>
中间的换行和缩进可能让浏览器插入多个 Text 节点，此时 <li>C</li> 实际可能是第5个子节点，nth-last-child(1) 就选不到它。
:nth-last-of-type(1) 替代 :nth-last-child(1) 更鲁棒nth-last-child 数的是「位置」，nth-last-of-type 数的是「同类标签的倒序序号」。这是最常混淆的点。
假设父容器内有：<div>、<code><p></p>、<div>、<code><p></p>、<div> 共5个子元素：
<ul><li>
<code>div:nth-last-child(1) → 匹配最后一个子元素，即第5个 <div>（如果它是第5个）
<li>
<code>div:nth-last-of-type(1) → 匹配所有 <div> 中倒数第1个，即第3个 <code><div>，不管它在整体中排第几
<li>如果最后一个子元素是 <code><p></p>，那 div:nth-last-child(1) 根本不会匹配任何元素
多数业务场景下，你要的其实是后者——比如「让列表最后一项加粗」，应写 li:nth-last-of-type(1) { font-weight: bold; }，而不是依赖它恰好是最后一个子元素。
浏览器计算 nth-last-child 需遍历所有兄弟节点，嵌套层级越深、兄弟越多，样式重排开销越大。尤其在动态增删节点的列表（如 React/Vue 渲染的列表）中，频繁触发会导致卡顿。
.list > li:nth-last-child(2) > span:first-child 这种深度嵌套class="last-third" 更稳定、可读、易调试nth-last 类选择器的重绘优化较差，可能导致闪烁真正需要动态响应数量变化时，CSS 伪类才不可替代；其他时候，多花10秒加个 class，比调半小时选择器更省事。
相关文章
如何在React项目中解决Bootstrap组件CSS模块化污染？
在Less 2.x升级到4.x时如何平滑迁移旧版CSS？
怎样在Less中利用函数重载逻辑生成复杂的CSS渐变背景
为什么React项目打包后部分组件CSS顺序发生颠倒错乱
如何在CSS中解决父元素relative时绝对定位溢出截断？
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
c语言变量名规则是：1、变量名以英文字母开头；2、变量名中的字母是区分大小写的；3、变量名不能是关键字；4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容，供大家免费下载使用。
3669
2023.06.20
c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。
1400
2023.08.02
数据结构是指将数据按照一定的方式组织和存储的方法。它是计算机科学中的重要概念，用来描述和解决实际问题中的数据组织和处理问题。数据结构可以分为线性结构和非线性结构。线性结构包括数组、链表、堆栈和队列等，而非线性结构包括树和图等。php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。
1338
2023.08.09
c语言random函数用法：1、random.random，随机生成（0,1）之间的浮点数；2、random.randint，随机生成在范围之内的整数，两个参数分别表示上限和下限；3、random.randrange，在指定范围内，按指定基数递增的集合中获得一个随机数；4、random.choice，从序列中随机抽选一个数；5、random.shuffle，随机排序。
1436
2023.09.05
const是关键字，可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍：1、声明常量，const关键字可用于声明常量，常量的值在程序运行期间不可修改，常量可以是基本数据类型，如整数、浮点数、字符等，也可是自定义的数据类型；2、函数参数中的const修饰符，const关键字可用于函数的参数中，表示该参数在函数内部不可修改等等。
2378
2023.09.20
get函数是一个用于从输入流中获取字符的函数。可以从键盘、文件或其他输入设备中读取字符，并将其存储在指定的变量中。本文介绍了get函数的用法以及一些相关的注意事项。希望这篇文章能够帮助你更好地理解和使用get函数 。
3920
2023.09.20
c语言数组初始化的方法有直接赋值法、不完全初始化法、省略数组长度法和二维数组初始化法。详细介绍：1、直接赋值法，这种方法可以直接将数组的值进行初始化；2、不完全初始化法，。这种方法可以在一定程度上节省内存空间；3、省略数组长度法，这种方法可以让编译器自动计算数组的长度；4、二维数组初始化法等等。
18575
2023.09.22
DBeaver数据导入专题，整理Excel、CSV、SQL、TXT等常见文件的数据导入方法，涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作，帮助用户将本地文件中的数据写入数据库，并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。
0
2026.11.05
热门下载
相关下载
精品课程
最新文章
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn
