:nth-of-type只按同级同标签元素计数，不认class、嵌套或全局序号；处理不规则结构需先理清DOM层级并选对作用域，否则样式无效。
直接说结论：:nth-of-type 不适合“不规则列表”，它只认标签名和同级位置，不认 class、嵌套层级或全局序号；真要处理不规则结构，得先理清 DOM 层级，再选对作用域，否则样式根本不会生效。
为什么 .list li:nth-of-type(2) 经常选不到第二个 li
因为 :nth-of-type() 只在**同一父元素下、相同标签名的直接子元素**中计数。如果 HTML 是这样：
<ul class="list"> <li>第一项</li> <div><li>第二项</li></div> <li>第三项</li> </ul>
那么 ul 下只有两个直接子 li（第1个和第3个），li:nth-of-type(2) 实际匹配的是“第三项”，不是你肉眼看到的“第二项”。
- 浏览器根本不把
<div><li>...</li></div>里的li当作 ul 的兄弟元素 -
.list li是后代选择器，但:nth-of-type的计数范围仍由li的**最近父容器**决定 - 想控制“第二项”，必须让它和其它
li同级——要么删掉中间的div，要么把样式写成div li:nth-of-type(1)
表格里 tr:nth-of-type(even) 没变色？检查 tbody 是否被隐式插入
浏览器会自动补全 <tbody>，导致 <code>tr 实际不在 <table> 直接子级，而是在 <code><tbody> 下。这时 <code>table tr:nth-of-type(even) 无效，因为 tr 的同级兄弟是 <thead>、<code><tbody>、<code><tfoot>，不是别的 <code>tr。
立即学习“前端免费学习笔记（深入）”；
- 正确写法是
tbody tr:nth-of-type(even)或table > tbody tr:nth-of-type(even) - 如果用了
<thead><tr>...</tr></thead>，那thead tr:nth-of-type(1)会命中表头行，不影响 tbody 内的计数 - 不要依赖
tr:nth-child(even)来绕过——只要插一个注释节点或空格文本，序号就全乱
想给“每第三个带 .card 的 div”加样式？别用 :nth-of-type(.card)
CSS 里没有 div.card:nth-of-type(3) 这种语法——:nth-of-type() 完全忽略 class 名。它等价于 div:nth-of-type(3)，只看 div 标签顺序，不管有没有 class="card"。
- 如果父容器里只有
div.card，且中间没混其他div，那div.card:nth-of-type(3n)偶尔能“碰巧”生效，但不可靠 - 真正安全的做法是确保结构干净：
section > div.card，然后用section > div.card:nth-of-type(3n) - 若结构无法控制（比如 CMS 输出带干扰
div），就得用 JS 动态加data-index或改用:is(.card):nth-child(3n)（注意兼容性）
公式 3n+1 能选中第 1、4、7… 个元素，但 n 从 0 开始算
很多人误以为 li:nth-of-type(3n+1) 从第 3 个开始，其实 n=0 时结果是 1，n=1 时是 4，n=2 时是 7——它选的是位置 1、4、7…，不是“每隔 3 个跳着选”。
- 验证方式：手动代入 n=0,1,2 → 得到 1,4,7，再对照 DOM 数一遍
-
3n表示第 3、6、9… 个；3n-1表示第 2、5、8… 个（n=1→2，n=2→5） - 性能上无差别，但写
3n+1比写odd或even更易出错——建议先用数字测试，再换公式
最常被忽略的一点：:nth-of-type 的“类型”只认 HTML 标签名，<img alt="如何使用CSS:nth-of-type设置不规则列表样式" > 和 <svg></svg> 里的 <path></path> 是不同类型，path:nth-of-type(2) 只统计同级 <path></path> 元素，和 <circle></circle> 或外层 <svg></svg> 无关。结构一复杂，就得一层层确认父级和兄弟节点——没有捷径。
