:nth-child(2n+6)可选中从第6个起的偶数行(6、8、10…),因n从0开始代入得6、8、10;若DOM含干扰标签,应改用:nth-of-type(2n+4)按同类型计数。

用 :nth-child(2n+6) 直接命中目标位置
要选中“偶数行但排除前两个项”,本质是:从第6个开始,每2个取1个(即第6、8、10、12…)。公式 2n+6 正好满足——当 n=0 时得6,n=1 得8,n=2 得10,以此类推。
注意:2n+4 是错的,它会选中第4、6、8…,没跳过第4项;2n+6 才真正跳过前5个位置,从第6个(第一个符合条件的偶数位)起生效。
为什么不用 :nth-of-type?
如果父容器里混有其他标签(比如 div、span 插在 li 中),:nth-child 会因全局计数失效——第6个子元素可能根本不是 li。
此时应改用 :nth-of-type(2n+4):它只数同类型(如 li)的顺序,第4个 li 是你要的“第一个被选中的偶数序号 li”,前提是前3个 li 之前还有别的标签干扰了位置。
立即学习“前端免费学习笔记(深入)”;
简单说::nth-child 看位置,:nth-of-type 看同类序号;选哪个,取决于你 DOM 是否干净。
常见翻车点:负数偏移和括号写法
别写 :nth-child(-2n+6)——这是倒序选前几个偶数位,完全反向;也别漏括号,:nth-child 2n+6(没括号)是无效语法,浏览器直接忽略。
容易被忽略的细节:
-
n从0开始代入,不是从1 - 所有数字必须是整数,
2n+5.5不合法 - 空格不能省:
:nth-child(2n +6)中的空格无关紧要,但:nth-child(2n+6)最稳妥
验证是否生效的最快方式
加一条临时样式,比如:
tr:nth-child(2n+6) { background: #ffeb3b !important; }
然后在浏览器开发者工具里检查目标行的 computed styles,确认该规则是否出现在 matched CSS rules 列表中。如果没出现,大概率是选择器写错,或父级结构比预期复杂(比如表格里有 thead、tbody 分层,导致 tr 不是直接子元素)。
这时候就得把选择器升级成 tbody tr:nth-child(2n+6) 或换用 :nth-of-type——DOM 层级永远比公式更优先。


















