li:nth-child(n+5)常失效是因为它按父元素所有子元素序号计数，而非仅li；应改用li:nth-of-type(n+5)，后者只统计同标签兄弟元素，不受其他类型节点干扰。
为什么直接写 li:nth-child(n+5) 常常失效
因为 :nth-child() 数的是父元素下**所有子元素的序号**，不是只数 li。只要中间插了个 div、hr、注释节点或空文本，第 5 个 li 可能是第 7 或第 8 个子元素，li:nth-child(n+5) 就会漏掉它，甚至匹配到非 li 元素上。
用 li:nth-of-type(n+5) 才是稳妥解法
:nth-of-type() 只统计同标签（这里是 li）的兄弟元素，完全无视其他类型干扰。只要目标是“第 5 个及之后的 li”，就该用它：
ul li:nth-of-type(n+5) {
display: none;
}
- ✅ 适用于含标题、分隔线、服务端注入占位符的列表
- ⚠️ IE8 不支持，如需兼容，得靠 JS 或 class 控制显隐
- ⚠️ Vue/React 渲染时自动插入 comment 节点，
:nth-child()极易错位，:nth-of-type()是更安全的选择
配合“查看更多”按钮时，JS 切换要避开两个坑
纯 CSS 无法撤销 display: none，必须靠 JS。但常见写法容易出问题：
- ❌ 别用
.show-all li { display: list-item; }—— 它会覆盖原始样式（如margin、::marker），导致列表项间距/序号错乱 - ✅ 正确做法是给父容器加类，再用
ul.show-more li:nth-of-type(n+5)单独恢复显示 - ⚠️ 如果列表项含懒加载图片或动画，切换前建议读一次
offsetHeight，避免渲染卡顿
移动端和可访问性容易被忽略的细节
隐藏后光放个“查看更多”按钮远远不够：
- 屏幕阅读器不会主动告知“还有 12 条未显示”，需用
aria-live或动态更新按钮文案（如“查看更多（12 条）”） - 小屏下按钮点击区域太小，至少保证
min-height: 44px和足够内边距 - 别用
visibility: hidden替代display: none—— 它仍占布局空间，展开时页面高度会突变
真正麻烦的从来不是写一行 nth-of-type，而是 DOM 结构不干净时你根本不知道它为什么没生效，以及用户看不见、点不准、读不到——这些才是线上真实问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
