如何选中特定倍数的列表项_掌握CSS :nth-child(n)的高阶用法公式-css教程-PHP中文网

:nth-child(10n) 能精准选中第10、20、30…个子元素，但要求目标元素是父容器中连续的第10n个子节点（从1开始计数）；若中间混有其他标签或注释，应改用:nth-of-type(10n)或js动态添加类。

如何选中特定倍数的列表项_掌握css :nth-child(n)的高阶用法公式

直接说结论：用 :nth-child(10n) 能精准选中第 10、20、30… 行，但必须确保目标元素在父容器中是连续的子元素，且序号从 1 开始计数；如果中间夹杂其他标签（比如 <div> 或标题），<code>:nth-child 就会失效——这时候得换 :nth-of-type 或 JS。

为什么 `:nth-child(3n)` 有时不生效

常见错误现象是写了 li:nth-child(3n) { color: red; }，但第 3、6、9 个 <li> 没变色。原因不是公式写错，而是 HTML 结构里这些 <li> 并非父元素下的“第 3、6、9 个子元素”。比如父容器里混着 <h3></h3>、<p></p> 或注释节点，:nth-child 只看位置，不看标签名。

检查浏览器开发者工具中目标 <li> 的实际 DOM 序号（右键 → “检查”，看它在父节点下的 childIndex）

若序号不等于你期望的倍数（如你想标第 10 个 <li>，但它其实是父元素的第 13 个子节点），:nth-child(10n) 就不会命中

:nth-child 的 n 从 0 开始代入，10n 对应 0, 10, 20…，即第 10、20、30… 个子元素；10n+1 才是第 1、11、21…

:nth-of-type(10n) 更适合纯列表场景

如果你只关心某类标签（比如所有 <li>）中的倍数项，不管中间有没有其他元素，就该用 :nth-of-type。它只统计同类型兄弟元素的顺序。

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

适用场景：导航菜单、商品卡片列表、侧边栏链接等含混合结构的容器

示例：ul li:nth-of-type(5n) { font-weight: bold; } 会加粗第 5、10、15… 个 <li>，哪怕前面插了 3 个 <div> <li>注意：<code>:nth-of-type 不支持伪元素（如 ::before），也不能跨父级统计

需要动态控制倍数？别硬套 CSS，用 JS 更稳

当倍数值来自变量（比如用户输入“每 7 行高亮”）、或需响应式切换（移动端每 2 行，桌面端每 5 行），CSS 静态公式就不够用了。此时直接用 JS 计算并加 class 最可靠。

简单实现：document.querySelectorAll('li').forEach((el, i) => { if ((i + 1) % 7 === 0) el.classList.add('highlight'); });

优势：不受 HTML 结构干扰，可结合 dataset 或属性选择器做条件判断

坑点：DOM 变更后需重新运行；若列表由框架（React/Vue）渲染，应在生命周期钩子中操作，而非 DOM 加载完就执行

真正容易被忽略的是「起始偏移」——比如想从第 2 个开始每 10 个选一个，得用 :nth-child(10n+2)，而不是 :nth-child(10n)。很多人试了几次没效果，就去查兼容性，其实只是公式里漏了 +2。