: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> 或注释节点，它们也被计入子元素序号。
例如：
<ul><br> <li>A</li><br> <p>干扰项</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><br> <li>B</li><br> <li>C</li><br></ul>这时第一个 <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 —— 这一步跳过，后面调样式基本都在猜。
