:first-child未生效是因为它要求元素既是父容器第一个子节点又符合选择器类型，而非首个匹配标签的元素；空白或注释节点也会干扰匹配，此时应改用:first-of-type。
为什么 :first-child 没选中我想要的第一个元素？
常见现象是：明明目标元素是父容器里的第一个子节点，但 :first-child 样式没生效。根本原因是它匹配的是「在所有子元素中排第一的、且类型匹配的元素」——不是「第一个符合某类标签的子元素」，而是「第一个子元素，且恰好是该标签」。
比如父元素内顺序是： 内容 另一段 立即学习“前端免费学习笔记（深入）”； 当用 JavaScript 动态向父容器末尾追加新子元素（例如 例如你给最后一个按钮加了红色边框： 区别核心在于「计数维度不同」： 对如下 HTML： B D 结果是： HTML 中的换行、缩进、注释都会生成 DOM 节点（text node 或 comment node），它们也参与 例如这段写法： 此时
，那么 p:first-child 不会匹配任何 ，因为第一个子元素是 。
」，用 p:nth-of-type(1) 更可靠:first-child 要求元素既是第一个子节点，又满足选择器条件（如 p:first-child → 第一个子节点必须是 ）
:last-child 在动态插入元素时行为不稳定？appendChild()），:last-child 会自动更新匹配对象——这是它的正常行为，但容易引发意料之外的样式切换。button:last-child { border: 2px solid red; }，后续插入新 后，原按钮就不再匹配，红色边框消失。
:last-child，改用类名控制（如 button.final）:last-child 不受元素 visibility 或 display 影响，只要 DOM 中存在且是最后一个子节点，就匹配和
:first-of-type / :last-of-type 的关键区别在哪？:first-child 看的是 DOM 子节点顺序；:first-of-type 看的是同类型元素的顺序。div > *:first-child { color: red; }
div > p:first-of-type { color: blue; } 变红（它是第一个子元素）， B 变蓝（它是第一个 类型）；而 D 不会被 :first-of-type 匹配，但会被 :last-of-type 匹配。
:nth-child(n) 和 :nth-of-type(n) 同理：前者按整体序号，后者按同类序号、、-of-type 系列更可控用伪类做列表首尾样式时，别忽略空格和注释节点
:first-child / :last-child 的计数——尽管不可见。
li:first-child 不会生效，因为第一个子节点是注释节点，不是 。
