:nth-child(n+5) 不能直接隐藏“多余项”是因为它按父元素所有子元素顺序编号，而非仅目标元素；正确做法是用 :nth-of-type(n+5) 或确保结构纯净。
为什么 :nth-child(n+5) 不能直接隐藏“多余项”
很多人以为写上 li:nth-child(n+5) { display: none; } 就能自动隐藏第 5 项之后的所有 li，结果发现：如果列表里有其他非 li 元素（比如 div、p 或注释节点），:nth-child() 会按**父元素下所有子元素的顺序编号**，而不是只数 li。这意味着第 5 个 li 可能是父元素的第 8 个子元素，:nth-child(n+5) 实际匹配的是第 5、6、7…个子元素——其中很多根本不是 li，导致隐藏错位甚至完全不生效。
正确做法：确保目标元素连续且类型唯一，或改用 :nth-of-type()
如果列表结构干净（即 ul 或 ol 下只有 li，无干扰节点），:nth-child(n+5) 是可用的。但更稳妥的是用 :nth-of-type(n+5)，它只计算同类型（li）的兄弟元素：
ul li:nth-of-type(n+5) {
display: none;
}
- ✅ 适用于存在标题、分隔线等其他元素的列表（如
<ul> <li>...</li> <hr> <li>...</li> </ul>） - ⚠️ 注意：IE8 不支持
:nth-of-type，如需兼容，得用 JS 或额外 class 控制 - ? 如果用 JS 动态插入“查看更多”按钮，建议在隐藏前先统计真实
li数量，避免 CSS 隐藏后 JS 读不到 DOM 节点
配合“查看更多”按钮时，JS 如何安全切换显示
纯 CSS 无法“取消” display: none，必须靠 JS 切换状态。常见错误是直接给所有 li 加 show-all 类再用 .show-all li { display: list-item; } —— 这会覆盖掉原本的样式（比如 margin、padding），还可能破坏伪元素（::marker）。
- 推荐做法：用一个开关类作用于父容器，例如
ul.show-more，然后写ul.show-more li:nth-of-type(n+5) { display: list-item; } - 不要用
visibility: hidden替代display: none，否则仍占布局空间，“查看更多”后列表高度突变明显 - 如果列表项含动画或懒加载图片，显示前建议触发一次
offsetHeight读取，强制重排以避免渲染卡顿
移动端适配和可访问性容易被忽略的点
隐藏后“查看更多”按钮如果只是 <button>查看更多</button>，屏幕阅读器不会自动告知用户“还有 X 条未显示”。而且小屏下点击区域太小，也容易误触。
- 加
aria-expanded="false"和aria-controls="list-id"，点击后同步更新属性值 - 用
min-height或padding-bottom为按钮预留足够触控空间（至少 44px） - 如果服务端已知总条数（比如 12 条），建议把数字写进按钮文案：
查看更多（7 条），比模糊文案更可靠
真正难的不是写对那行 :nth-child，而是让隐藏逻辑和交互状态、DOM 结构、辅助技术全部对齐。少一个环节，用户就可能卡在“以为没更多了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
