css 伪类与子元素选择_使用 :first-child 和 :last-child 选择首尾子元素_技术教程

:first-child未生效是因为它要求元素既是父容器第一个子节点又符合选择器类型，而非首个匹配标签的元素；空白或注释节点也会干扰匹配，此时应改用:first-of-type。

为什么 `:first-child` 没选中我想要的第一个元素？

常见现象是：明明目标元素是父容器里的第一个子节点，但 :first-child 样式没生效。根本原因是它匹配的是「在所有子元素中排第一的、且类型匹配的元素」——不是「第一个符合某类标签的子元素」，而是「第一个子元素，且恰好是该标签」。

比如父元素内顺序是：

内容


另一段

，那么 p:first-child 不会匹配任何，因为第一个子元素是

，不是 。
要选「第一个 」，用 p:nth-of-type(1) 更可靠

:first-child 要求元素既是第一个子节点，又满足选择器条件（如 p:first-child → 第一个子节点必须是 ）
注意空白文本节点（换行/缩进）在某些旧版解析中可能被算作子节点，导致意外不匹配


:last-child 在动态插入元素时行为不稳定？
当用 JavaScript 动态向父容器末尾追加新子元素（例如 appendChild()），:last-child 会自动更新匹配对象——这是它的正常行为，但容易引发意料之外的样式切换。
例如你给最后一个按钮加了红色边框：button:last-child { border: 2px solid red; }，后续插入新  后，原按钮就不再匹配，红色边框消失。

若需「始终作用于最初那个末尾元素」，不要依赖 :last-child，改用类名控制（如 button.final）
若需「固定作用于最后插入的那个」，可配合 JS，在插入后手动添加临时类，避免样式抖动

: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; }
对如下 HTML：
  A
  B
  C
  D
结果是： 变红（它是第一个子元素），
 B 变蓝（它是第一个  类型）；而 D 不会被 :first-of-type 匹配，但会被 :last-of-type 匹配。


:nth-child(n) 和 :nth-of-type(n) 同理：前者按整体序号，后者按同类序号
兼容性上，两者都支持 IE9+，无实际差异；但语义意图不同，选错会导致维护困难
如果父容器子元素类型高度混杂（如表单里穿插 、、），优先用 -of-type 系列更可控用伪类做列表首尾样式时，别忽略空格和注释节点
HTML 中的换行、缩进、注释都会生成 DOM 节点（text node 或 comment node），它们也参与 :first-child / :last-child 的计数——尽管不可见。
例如这段写法：

  
  第一项
  第二项
此时 li:first-child 不会生效，因为第一个子节点是注释节点，不是 
。

开发阶段可用浏览器开发者工具的「Elements」面板查看真实子节点构成（右键 → “Show user agent shadow DOM” 不需要，但勾选“Show comments”能看见注释）
构建流程中可借助 HTML 压缩工具（如 html-minifier）移除冗余空白和注释，让结构更干净
若必须保留格式，改用 li:first-of-type 是最直接的绕过方式