:nth-child(n+2)选中除第一个外所有子元素，因其按dom顺序对全部子节点编号，n从0开始代入得2,3,4…序列，严格匹配位置而非类型。
为什么 :nth-child(n+2) 能选中除第一个外的所有子元素
因为 :nth-child(an+b) 的计算逻辑是：对每个子元素按其在父容器中的位置序号（从 1 开始）代入表达式 an+b，若结果等于该元素的位置序号，就匹配。当使用 n+2 时，n 从 0 开始取整数，得到的序列是 2, 3, 4, 5… —— 正好跳过第 1 个，覆盖后续全部。
注意这不是“排除第一个”，而是“从第二个开始连续匹配”，所以它依赖于子元素的真实 DOM 顺序和类型无关（哪怕中间有 <div>、<code><p></p>、文本节点，只要它们是子节点，就参与计数）。
:nth-child(n+2) 和 :nth-of-type(n+2) 的关键区别
前者按所有子元素统一编号，后者只对同类型标签编号。比如父元素内是 <h1></h1>
<p></p>
<p></p>
<span></span>：
-
:nth-child(n+2)会选中第 2、3、4 个子元素（即第一个<p></p>、第二个<p></p>、<span></span>） -
:nth-of-type(n+2)对<p></p>单独编号，只选中第二个<p></p>（即第 2 个<p></p>），其他类型不参与这个计数
如果你只想跳过第一个 <li>，但列表里混着 <div> 或注释节点，用 <code>:nth-of-type 更稳妥；如果目标就是“视觉上第 2 行及以后的所有直接子项”，就坚持用 :nth-child(n+2)。
常见失效场景与调试建议
写完发现没生效？大概率是这几个原因：
- 父元素没有设置
display: block或其它支持子元素布局的 display 值（如flex、grid），某些旧版浏览器对:nth-child在 inline 元素上的行为不一致 - 子元素前有空白文本节点（例如换行、缩进空格），它们也算子节点，会把原本想选的
<div> 挤到第 3 位甚至更后 <li>CSS 优先级被更高权重的选择器覆盖，可临时加 <code>!important验证是否样式冲突 - 用了
<template></template>或<slot></slot>，真实渲染结构和源码 DOM 不一致，需在 DevTools 中看最终子节点树
替代写法与性能提醒
除了 :nth-child(n+2)，你还能写成 :nth-child(2) ~ :nth-child(999)（不推荐）、或用 JS 动态加类。但最简洁且无兼容问题的仍是 n+2。
现代浏览器对 :nth-child 优化得很好，但要注意：如果父容器子节点极多（比如上千个），且频繁触发重排，CSS 选择器本身不会卡顿，但样式计算量会上升——这时不如用 JS 批量操作或虚拟滚动。
真正容易被忽略的是：这个选择器不感知内容变化。比如用 JS 插入一个新子元素到开头，原来第 2 个变成第 3 个，:nth-child(n+2) 会自动把它包含进来——这是特性，不是 bug，但得心里有数。
