:nth-child(n+4) 不能直接隐藏超出项，因其按所有同级子元素计数而非仅li标签；混入div、注释或空白文本节点会导致序号错位，应优先用:nth-of-type(n+4)或js动态控制。
为什么 :nth-child(n+4) 不能直接“隐藏超出项”
很多人以为写上 li:nth-child(n+4) { display: none; } 就能自动隐藏“第4个之后的所有 li”，但实际效果取决于 HTML 结构是否干净。如果列表里混有其他同级元素（比如 div、注释、空格文本节点），:nth-child() 是按**所有同级子元素位置**计数的，不是只看 li。结果可能第4个 li 实际是第6个子元素，导致隐藏错位。
确保只对目标 li 生效的写法
最稳妥的方式是用 :nth-of-type() 替代，它只统计同类型标签（如 li）的位置：
ul li:nth-of-type(n+4) {
display: none;
}
- 适用于标准语义化列表：
ul>li，且中间无其他li外的块级干扰元素 - 如果列表里有
li前插入了div，:nth-of-type()仍只数li，不受影响 - 注意：IE8 不支持
:nth-of-type()；若需兼容，得用 JS 或额外 class 控制
当必须用 :nth-child() 时怎么避免踩坑
如果你的 DOM 确实干净（只有 li 子元素），那 :nth-child(n+4) 是可用的，但要确认两点：
- 父容器内不能有文本节点（包括换行缩进产生的空格）——它们也算子元素，会改变序号
- 不能有注释节点
<!-- -->，它们也会被计入:nth-child()的计数 - 检查浏览器开发者工具的 Elements 面板，展开父元素，看子节点真实结构和序号
- 临时加一条调试样式：
* { outline: 1px solid red; }，能快速识别哪些“看不见”的节点占了位置
更健壮的替代方案：CSS 自定义属性 + JS 动态控制
纯 CSS 在复杂 DOM 下容易失效，真要精确控制“显示前 N 项”，推荐结合 JS 计算后打标记：
const list = document.querySelector('ul');
list.querySelectorAll('li').forEach((el, i) => {
el.style.setProperty('--item-index', i + 1);
});
然后 CSS 写：
ul li {
display: none;
}
ul li:nth-child(-n+3) {
display: list-item;
}
/* 或更灵活地用属性选择器 */
ul li[style*="--item-index: 1"],
ul li[style*="--item-index: 2"],
ul li[style*="--item-index: 3"] {
display: list-item;
}
这种写法绕开了 DOM 干扰问题，也便于后续动态更新数量（比如从显示3项改成5项只需改 JS 中的 3）。
真正容易被忽略的是：所谓“超出项”是否本就该由服务端或组件逻辑截断——CSS 隐藏只是视觉掩耳盗铃，DOM 仍在、事件监听器还在、屏幕阅读器仍可访问。需要隐藏时，优先考虑数据层裁剪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
