:nth-child(n+5) 不能直接隐藏“超出5项”的列表，因为它按所有同级子元素计数，而非仅目标标签；若存在注释、文本节点或div等干扰节点，第5个li可能不是第5个子元素，导致隐藏错位或遗漏。
为什么 :nth-child(n+5) 不能直接隐藏“超出5项”的列表？
很多人以为写个 :nth-child(n+5) { display: none; } 就能隐藏第5项之后的所有列表项，结果发现不对——它实际隐藏的是从第5个子元素开始的每个元素，但前提是这些子元素**确实是同级的 li 或目标标签**。如果列表里混有其他类型节点（比如注释、文本节点、div 分隔符），:nth-child 会按所有兄弟节点计数，而非仅 li 元素。这意味着第5个 li 可能是第7个或第9个子元素，:nth-child(n+5) 就会漏掉或误杀。
正确做法：用 :nth-of-type() 或确保结构干净
最稳妥的方式是改用 :nth-of-type(n+5)，它只对同类型标签计数（比如只数 li），不受中间插入的其他节点干扰。前提是你的列表项都是 li 标签且没有包裹容器打乱层级。
- ✅ 推荐写法：
ul li:nth-of-type(n+5) { display: none; } - ⚠️ 注意：如果
li外层还有div或span包裹，:nth-of-type依然失效——此时必须先清理 DOM 结构，或改用 JS 控制 - ? 补充技巧：配合
:not(:nth-of-type(-n+4))效果相同，但可读性更差，不建议
遇到嵌套或动态内容时，CSS 本身有局限
如果列表由框架（如 React/Vue）动态生成，或存在 li 套 li、服务端注入非 li 节点（如广告 div），纯 CSS 几乎无法可靠识别“第5个可见列表项”。这时 :nth-child 和 :nth-of-type 都会失准。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ❌ 不要强行用
li:nth-child(5) ~ li：它依赖连续兄弟关系，一旦中间插入节点就断裂 - ✅ 替代方案：给前4项加 class（如
class="visible"），CSS 写li:not(.visible) { display: none; }，由 JS 或模板逻辑控制 - ⚡ 性能提示：大量列表项（>100）用
display: none仍会渲染，若需极致性能，应在 JS 层截断数据再渲染
浏览器兼容性和伪类链式写法
:nth-of-type(n+5) 在 IE9+ 支持良好，但 IE8 及更早版本完全不支持。如果必须兼容 IE8，只能靠 JS 或服务端截断。
- ✅ 安全组合写法：
ul > li:nth-of-type(n+5)—— 使用子选择器避免意外匹配深层嵌套 - ? 避免写成
li:nth-child(n+5):not(.special)：伪类顺序错误会导致整个规则失效（:not()必须在最后） - ? 调试建议：在 DevTools 中右键检查第5个
li，看它的nth-child和nth-of-type值是否一致，这是判断该用哪个的关键
真正麻烦的不是写法本身，而是页面结构是否“诚实”——只要兄弟节点类型和层级一乱，:nth- 系列就变成玄学。动手前先 inspect 一下真实 DOM，比查文档更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
