PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
li:nth-child(3)常失效是因为它匹配父元素第3个子节点且必须是li，而html换行、注释或插入的div等会改变实际序号；应优先用li:nth-of-type(3)（只统计li兄弟），或用开发者工具检查真实dom结构。
它根本不是“选第几个元素”，而是“选父元素下第几个子节点”——只要那个位置上恰好是你写的标签，才生效。
为什么 li:nth-child(3) 经常不生效？
最常见原因是：你数的“第三个 li”，在 DOM 树里根本不是父元素的第三个子节点。
- HTML 换行缩进会生成
Text节点（比如空格、回车），它们也计入:nth-child的计数 - 中间插了
<div>、<code><p></p>或注释<!-- banner -->，都会让序号偏移 - 浏览器开发者工具里右键父元素 → “Edit as HTML”，才能看清真实子节点顺序（别只看折叠后的 Elements 面板）
-
li:nth-child(3)：父元素所有子节点从 1 开始数，第 3 个必须是li，否则不匹配 -
li:nth-of-type(3)：只在所有li兄弟中单独编号，跳过div、p、注释等干扰项 - 结构干净（纯
ul+li）时两者效果一样；CMS 输出、用户可编辑区域、含广告位的列表，一律优先用nth-of-type - n 从 0 开始代入，结果 ≥ 1 才有效（
nth-child(0)无效，nth-child(-1)更无效） -
3n+1不是“每 3 个取第 1 个”，而是“第 1、4、7、10…个子元素”——起点由 +1 决定，步长由 3 决定 - 想选前 5 个？
:nth-child(-n+5)可行，但不如直接写:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)直观易维护 - 要选第 4 到第 8 个？用组合：
:nth-child(n+4):nth-child(-n+8)，缺一不可
li:nth-of-type(3) 和 li:nth-child(3) 到底该用哪个？
区别不在“类型”或“位置”，而在“怎么数”：
公式 an+b 怎么写才不出错？
别背口诀，记住两个硬规则：
调试时最容易被忽略的一点
Flex 或 Grid 布局下，视觉顺序和 DOM 顺序可能不一致——:nth-child 永远按 DOM 顺序计算，不会跟着 CSS 排列走。如果用了 order 或 grid-template-areas，靠 :nth-child 控制样式大概率失效，得换思路（比如加 class 或用 JS 动态标记）。
