先说一句，这玩意儿看起来很较高较大上，其实就是把第一个子节点挑出来给它穿件衣服。 一句话。 下面我就随便聊聊，别当真实。

一、 :first-child到底是干啥子的

好吧... :first-child 是 CSS 里的伪类，顾名思义，就是「父元素下面的第一个孩子」匹配成功就套上你的规则。注意，它不管当前这个「孩子」是不是你想要的标签，只要它是父元素的第一个子节点，就会命中。

举个例子：

    
第一项
    
第二项

盘它。 如果你写 ul li:first-child {color:red;} 在较大更多数浏览器里不会生效，这是因为前面的换行会被算作 Text 节点，引起 并不是第一个子节点。

1）:first-of-type 是啥意思

:first-of-type 只看同类型的「第一个」，不管前面有没有别的标签或文本。上面例子改成：，太虐了。

ul li:first-of-type {color:red;}

反思一下。 这下就能正常工作岗位了这是因为它只在全部 中挑出第一个。

二、 最常见的几种写法

① 基础写法：直接选第一个子元素

    
我是第一个段落，会变红
    
第二段不变
    
第三段也不变

对应 CSS：

.demo p:first-child{
    background:#ffdddd;
    color:#900;
}

② 想要各个列表里第一个 li 加颜色，用 :first-of-type 避免空白节点干扰

    
首页
    
关于我们
    
联系我

.menu li:first-of-type{
    background:#e0f7fa;
}

③ 如果你坚硬要兼容 IE9 以下那只能加类名啦，伪类根本不认了。

三、 坑点集合

• 文本节点干扰：HTML 源码里的换行、空格都会生成 Text 节点，这会引起 :first-child 不命中。
• 注释算节点吗？注释不会算作子节点，所以一般可靠。
• :first-child 不等于页面上的第一条相同标签：它只看父级范围内的顺序。
• 层级太较深会缓慢：虽然性能差别不较大，但在几千条列表里滥用伪类会让浏览器沉重排更频繁。
• #id + .class 的优先级问题：:first-child 的权沉重是 0-1-0， 如果你有更较高权沉重的规则，它有可能被覆盖。

四、 实战案例：给崭新闻列表的第一篇标题加红底

    
标题一

    
标题二

    ...

Cascading:

.news article h2:title:first-of-type,
.news article h2.title:first-child{
    background:#ffcccc;
}

调试较小技巧

• 打开 Chrome 开发者工具，选中元素，看右键菜单里有没有 “:first‑child” 较高亮字样。
• 直接在控制台敲：document.querySelectorAll.length
• If you see 0 but you think re is a first li, check console.dir.childNodes) 看看前几个是不是 #text。

五、 SEO 那点事儿

嗯，就这么回事儿。 :first‑child 本身跟搜索引擎排名没啥关系，但是采用它能够降较低更多余的 class 名称，让 HTML 更语义化，这对爬虫友良好度稍微有一点提升。再者，如果你把十分沉关键信息放在首个元素里配合结构化数据，搜索最终还是结果是有可能会更良好看一点。

* 较小提醒 *

• - 别把全部东西都塞进 :first‑child；有时候直接加个 .first 就省事儿。
• - IE8 以下直接不支持，你要是还有老用户，就只能 JS 手动加类名了。
• - 更多层嵌套时记住写全路径，否则全局匹配会炸掉页面布局。

六、 感想

:first‑child 就像厨房里的第一把刀，你能够用它切菜，也能够当装饰品摆着。关键是弄清楚它到底匹配哪个「孩子」再去下手。不懂就去 console 看一下 DOM 树，或者直接把代码复制粘贴到在线编辑器里玩玩。祝较大家玩转 CSS， 别忘了更多喝水，更多歇息，更多看看天上的云彩——这一些都和前端没关系，但对码农心情超十分沉关键，火候不够。！

---

版权全部 © 2026 较小明乱写博客 | 如有侵权请联系删除

---