最稳妥的选择器是:nth-child(n+2)，它从父元素第2个子元素起匹配所有后续子元素，不区分类型且不受文本节点干扰；若仅排除某类元素（如第二个p），则用:nth-of-type(n+2)。
用 :not(:first-child) 选中除第一个外的所有子元素
这是最直观的写法，但要注意它选中的其实是「所有不是第一个子元素的元素」，不区分类型。比如父容器里有 <h2>、<p>、<div> 混排，:not(:first-child) 会把第二个及之后的所有子节点都命中，包括中间的文本节点（如果存在）。
实际使用时建议搭配元素类型限定：
-
div > p:not(:first-child)—— 只对<p>子元素生效 - 避免单独写
*:not(:first-child)，容易误伤或性能下降 - 注意：如果第一个子元素是注释或空格文本节点，
:first-child仍会匹配它，导致后续元素全部被选中
更稳妥的方案：:nth-child(n+2)
:nth-child(n+2) 是推荐做法，它明确表示「从第 2 个子元素开始，往后每一个都匹配」，不受节点类型影响，语义清晰，兼容性也好（IE9+）。
常见误用点：
立即学习“前端免费学习笔记（深入）”；
-
:nth-child(2n)是选偶数位，不是「从第二个起」——别混淆 -
:nth-of-type(n+2)和它不同：只计算同类型元素，比如<p>的第 2 个、第 3 个……可能跳过中间的<div> - 如果目标是「除第一个
<p>外的所有<p>」，才该用:nth-of-type(n+2)
遇到 Flex/Grid 容器时的特殊情况
Flex 或 Grid 布局下，DOM 顺序和视觉顺序可能不一致，但 :first-child 和 :nth-child() 始终按 HTML 结构顺序匹配，不受 order 属性影响。
这意味着：
- 即使你用
order: -1把某个子项提到最前，它在 DOM 中仍是原位置，:first-child不会变 - 想按视觉顺序筛选？CSS 本身做不到，得靠 JS 配合标记类名
- 不要指望
:nth-child()能响应flex-direction: column-reverse的翻转效果
为什么不用 ~（通用兄弟选择器）？
:first-child ~ * 看起来能选中第一个之后的所有兄弟，但它要求目标元素必须和第一个子元素同级且在它之后——而第一个子元素未必是其他目标元素的直接前驱。
例如：
<ul> <li>first</li> <li>second</li> <li>third</li> </ul>
li:first-child ~ li 是有效的，但换成嵌套结构就失效了。它本质是兄弟关系筛选，不是子元素范围控制，适用场景非常有限。
真正需要稳定排除第一个子元素时，:nth-child(n+2) 几乎总是最直接、最少歧义的选择。细节在于你要确认「第一个」是指整个子节点序列里的位置，还是某类元素中的序号——这点一旦错，样式就会漏或错配。
