:first-child伪类通过匹配父元素的第一个直接子元素来应用样式，不关心元素类型，适用于列表、导航等场景；而:first-of-type则选择特定类型的首个子元素，更适用于类型优先的场景。两者核心区别在于前者基于位置，后者基于元素类型，实际使用中需注意DOM结构变化、特异性冲突及动态内容插入的影响。

在HTML中要设置首个子元素的样式，最直接、最常用的方法就是利用CSS的

:first-child

伪类。它允许你精准地选中一个父元素内部的第一个子元素，无论这个子元素是什么标签类型。

解决方案

要使用

:first-child

伪类，你只需要在CSS选择器后面加上它。这个伪类的核心逻辑是，它会匹配其父元素的第一个孩子。这意味着，如果一个

里面有多个子元素，比如一个

、一个

和一个

，那么

:first-child

只会选中那个

，因为它是在

内部出现的第一个元素。

举个例子，假设你有一个无序列表，你想让列表的第一项看起来与众不同：

    
        
这是第一项        
这是第二项        
这是第三项        
列表下面的一个段落。
立即学习“前端免费学习笔记（深入）”；

如果你想让“这是第一项”变成红色加粗，你的CSS会是这样：

.my-list-container ul li:first-child {    color: red;    font-weight: bold;}

这里，

li:first-child

精确地选中了

元素内部的第一个

。需要注意的是，

:first-child

关注的是“位置”，它只看是不是它父元素的第一个直接子元素，而不关心这个子元素是不是特定类型的。比如，如果

前面突然加了个

，那么

li:first-child

就不会生效了，因为

不再是

的第一个子元素了，那个

才是。

first-child伪类的工作原理和应用场景是什么？

:first-child

伪类的工作原理其实挺直观的，它就是个“老大识别器”。浏览器在渲染页面时，会构建一个DOM树。当遇到一个元素并检查它是否匹配

:first-child

时，它会向上看这个元素的父节点，然后检查这个元素是不是父节点下的第一个直接子元素。如果答案是肯定的，那么样式就会应用上。这个过程很高效，因为DOM树的结构是明确的。

在我看来，

:first-child

在实际开发中简直是个小神器，尤其是在处理列表、导航菜单或者文章排版时。

比如，你可能想给一个文章的第一个段落（

）设置一个特殊的首行缩进或者字体大小，让它看起来更像杂志的开篇：

    
这是一篇文章的第一个段落，我想让它有点特别。
    
这是第二个段落，它就保持常规样式。
    
第三个段落也一样。