CSS如何选择同级中的第一个元素_通过-first-child伪类实现

:first-child 失效是因为它只匹配父元素的第一个子节点，不区分类型；若前面有注释、文本节点或其它标签，则不匹配。应改用 :first-of-type 或添加 class 控制。为什么 :first-child 有时不生效它只认“是不是父元素的第一个子节点”，不看类型。比如 <div><p>A</p><span>B</span></div> 中，<p> 是第一个子元素，p:first-child 能命中；但若前面加个 <!-- 注释 --> 或 <div><em>X</em><p>A</p></div>，<p> 就不是第一个子节点了，:first-child 直接失效。常见错误现象：li:first-child 没加粗、button:first-child 没变色——大概率是 DOM 结构里它前面有别的元素（空格换行在某些解析模式下也算文本节点）。检查浏览器开发者工具的 Elements 面板，确认目标元素是否真为父容器的 第一个子节点如果父容器开头有注释、文本节点或其它标签，:first-child 就不可靠想按“同类型中的第一个”匹配，得换 :first-of-type:first-of-type 和 :first-child 的关键区别:first-of-type 看的是“同名标签中排第一的那个”，不管中间隔了什么。比如 <div><em>1</em><p>2</p><span>3</span><p>4</p></div>，p:first-of-type 会选中 <p>2</p>，而 p:first-child 根本不匹配（因为 <p> 不是第一个子节点）。:first-child → “我是老大（位置第一）”:first-of-type → “我是同类里最早出生的那个（类型内序号第一）”性能上没差别，但语义完全不同；误用会导致样式完全不出现IE9+ 支持 :first-of-type，如果要兼容 IE8 及更早，只能靠 JS 或加 class真正“同级中第一个某类元素”的稳妥写法如果目标是“在一组兄弟元素中，选第一个 button”，且不确定 DOM 是否干净，最稳的方式是：明确加 class 控制，而不是赌伪类。立即学习“前端免费学习笔记（深入）”； 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能