:nth-child(3n+1) 未生效是因为它按 DOM 所有子节点计数，含注释、文本节点等干扰项；应改用 :nth-of-type(3n+1) 或添加 data 属性精准控制。

为什么 :nth-child(3n+1) 有时根本没生效

它只认 DOM 中第 1、4、7、10… 个子节点，且那个位置上**必须是你写的标签**。如果父容器里有注释 、换行产生的文本节点、或插进来的

，那原本“第 4 个 li”在 DOM 里可能已是第 6 个子节点——:nth-child(3n+1) 就会跳过它，去匹配第 7 个（如果那儿恰好是 li）。

常见错误现象包括：视觉上第 1 张图有样式，第 4 张没有，第 7 张又有了；或者加了一段文案后，所有样式整体偏移一位。

• 用浏览器开发者工具右键父元素 → “Edit as HTML”，看清真实子节点顺序（别信 Elements 面板折叠后的样子）
• 若结构不可控（如 CMS 输出、用户编辑区），优先改用 :nth-of-type(3n+1)，它只统计同类型兄弟，自动跳过干扰项
• Grid 布局下，order 或 grid-template-areas 会改变视觉顺序，但 :nth-child() 仍按原始 DOM 顺序计算，此时必失效

:nth-child(3n+1) 和 :nth-of-type(3n+1) 到底该选谁

区别不在“公式”，而在“数谁”：:nth-child(3n+1) 是从父元素第一个子节点开始，挨个数 1、2、3……遇到第 1、4、7… 个就停，检查是不是目标标签；:nth-of-type(3n+1) 是先筛出所有同类型兄弟（比如全部 li），再给它们单独编号 1、2、3……取第 1、4、7… 个。

• 纯 ul > li 结构，两者效果一致，可任选
• 含广告位、说明文字、动态插入区块的列表，一律用 li:nth-of-type(3n+1)
• 若目标元素不是直接子级（比如 li 被包在
  ...
  里），:nth-of-type 也会失效，得靠 data-index 或 JS 标记

想控制 Grid 中每组第一个元素跨列，光写 :nth-child(3n+1) 不够

:nth-child(3n+1) 只负责“选中”，不负责“怎么排”。要让它真正起作用，必须配合 grid-column: span N，且整个容器得是 display: grid 并定义好列轨道。

• 基础网格建议设为 grid-template-columns: repeat(6, 1fr)（3 和 2 的最小公倍数），保证跨列整除
• 若想让每 3 个元素为一组、每组第一个占满整行（span 6），写法是：li:nth-child(3n+1) { grid-column: span 6; }
• 但注意：如果第 1 个位置被一个
  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载
  占了，这个规则就完全不触发——所以实际项目中更稳妥的是给关键项加 data-group-start，再用属性选择器 li[data-group-start]

调试时最容易忽略的一点：n 从 0 开始代入，但结果必须 ≥ 1

公式 3n+1 不是“每 3 个挑第 1 个”，而是把 n=0,1,2,3… 依次代入，看结果是否为 ≥1 的正整数。n=0 得 1（有效），n=1 得 4（有效），n=2 得 7（有效）；而 3n-1 在 n=0 时得 -1，n=1 时得 2，中间缺了 1，会导致第一个元素永远选不到。

• 要选前 5 个？用 :nth-child(-n+5)，别用 :nth-child(5n)
• 要选第 4 到第 8 个？必须组合：:nth-child(n+4):nth-child(-n+8)，少一个都错
• 想排除第 1 个？:not(:nth-child(1)) 比写一堆 :nth-child(2), :nth-child(3), ... 更可靠

实际用的时候，别死磕公式推导。打开开发者工具，手动删掉几个干扰节点，看样式是否立刻恢复——这比查文档更快定位问题根源。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！