:nth-child(n+5)选中第5个及之后所有子元素，用于隐藏多余项需确保dom结构纯净；若含干扰节点，应改用:nth-of-type或js动态控制。

理解 :nth-child(n+5) 的实际效果

:nth-child(n+5) 选中的是「第 5 个及之后的所有子元素」，不是“跳过前四个”，而是“从第五个开始匹配”。它不会隐藏元素，只是给匹配到的元素添加样式——所以直接用它「实现折叠」是反直觉的。常见错误是写成 .item:nth-child(n+5) { display: none; }，结果发现列表末尾被截断、序号错乱，甚至某些项意外消失，原因在于 :nth-child 匹配的是 DOM 中的实际位置，而非可见顺序或逻辑分组。

正确做法：用 :nth-child(n+5) 配合 display: none 隐藏多余项

要只展示前四个元素，核心就是让第 5 个及以后的兄弟元素不可见。前提是这些元素必须是同一父容器下的连续同级子元素（比如 <ul><li></ul>），且中间不能有其他类型节点（如注释、文本节点、<div>）打断计数。 <ul> <li>确保 HTML 结构干净：<code><ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>

CSS 写法：

.list > li:nth-child(n+5) {
  display: none;
}

如果列表项是 <div class="item">，父容器是 <code><div class="container">，则用：<code>.container > .item:nth-child(n+5) { display: none; }

注意：该选择器对 flex 或 grid 布局无影响，仅作用于 DOM 树中的子元素顺序

为什么不用 :nth-of-type？

当父容器里混有其他标签（如 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<span></span> 或注释），:nth-child 计数会中断或偏移，导致隐藏错位。此时 :nth-of-type 更可靠——但它只按标签名计数，不认 class。例如：

• HTML 含 <li>A</li> <li>B</li> <p>note</p> <li>C</li>，li:nth-child(n+5) 无法生效（总共才 3 个 <li>），而 li:nth-of-type(n+5) 也无效（只有 3 个 <li>）
• 若需按 class 精确控制，得用 JS 动态加类，或改用 :is(.item):nth-child(n+5)（但兼容性差）
• 现代方案可考虑 display: grid + grid-template-rows: repeat(4, auto);，但语义和可访问性不如纯 CSS 隐藏

折叠后如何触发“展开”交互？

CSS 本身无法切换显示状态，必须配合 HTML + JS。常见模式是用一个 checkbox 或按钮控制父容器的 class，再用属性选择器切换规则：

• HTML：<input type="checkbox" id="expand"><label for="expand">展开</label><ul class="list">...</ul>
• CSS：

  .list > li:nth-child(n+5) { display: none; }
  #expand:checked ~ .list > li { display: list-item; }

• 注意：~ 是后续兄弟选择器，要求 <input> 和 <ul></ul> 同级且 <input> 在前；若结构不满足，得用 JS 切换 class
• 无障碍提示：记得为按钮添加 aria-expanded，并用 aria-controls 关联列表

真正容易被忽略的是 DOM 结构洁癖——哪怕一行空格或换行符在某些解析模式下都可能成为 text node，干扰 :nth-child 计数。上线前务必检查浏览器开发者工具里的实际子节点构成。