:nth-child(4n+1)表示每4个元素循环一次，从第1个开始匹配（即1、5、9…），核心是周期为4、起始偏移为1；若父容器含非目标标签，应改用:nth-of-type(4n+1)或清理DOM。
怎么写 :nth-child(4n+1) 这类公式
要每 4 个元素循环一次样式（比如第 1、5、9… 个加边框），核心是用 :nth-child(4n+1)。其中 4 是周期，1 是起始偏移 —— 也就是“从第 1 个开始，每隔 3 个选一个”。
同理：
-
:nth-child(4n+2)匹配第 2、6、10… -
:nth-child(4n+3)匹配第 3、7、11… -
:nth-child(4n+4)等价于:nth-child(4n)，匹配第 4、8、12…
公式里 n 从 0 开始代入，4n+1 就是 1、5、9、13…，不是 4、8、12。
为什么有时 :nth-child(4n+1) 不生效
常见原因是父容器里混了其他标签，比如 <div>、<code><p></p> 或注释节点，它们也被计入子元素序号。
例如：
- A
- B
- C
干扰项
这时第一个 <li> 是第 1 个子元素，第二个 <li> 是第 3 个，第三个是第 4 个 —— :nth-child(4n+1) 只会命中第 1、5、9… 位置的元素，不保证全是 <li>。
解决办法：
- 用
:nth-of-type(4n+1)，它只数同类型标签（如所有<li>） - 给目标元素加统一 class，比如
.item，再用.item:nth-child(4n+1) - 清理 DOM，确保父容器下只有目标标签
如何同时给四组不同样式
如果想让每组 4 个元素分别有不同背景色（比如红、绿、蓝、黄循环），不能只靠一个选择器，得写四条规则：
li:nth-child(4n+1) { background: #f00; }<br>li:nth-child(4n+2) { background: #0f0; }<br>li:nth-child(4n+3) { background: #00f; }<br>li:nth-child(4n+4) { background: #ff0; }
注意顺序无关紧要，但必须四条都写全；漏掉某一条，对应位置的元素就回退到默认样式。
性能上没问题，现代浏览器对这类伪类优化很好，但别在超长列表（>1000 项）里叠加太多同类规则，可能触发重排延迟。
:nth-child 和 :nth-of-type 到底选哪个
关键看 DOM 结构是否干净：
- 纯
<li>列表、纯<tr> 表格行 → 用 <code>:nth-child更直觉 - 父容器里有标题、分隔线、空
<div> 或服务端注入的占位符 → 必须用 <code>:nth-of-type - Vue/React 动态渲染时，常因条件渲染插入其他元素，此时
:nth-of-type更稳
另外，:nth-of-type 不支持 odd/even 的简写（:nth-of-type(odd) 合法，但部分老浏览器不认），而 :nth-child(odd) 兼容性更好。
实际用的时候，先 inspect 看父元素下子节点的真实顺序，再决定用 child 还是 of-type —— 这一步跳过，后面调样式基本都在猜。
