欢迎您访问新疆栾骏商贸有限公司，公司主营电子五金轴承产品批发业务！
全国咨询热线： 400-8878-609
新闻资讯
技术学院:first-child 伪类选择器用于选中父元素下首个子元素，且需符合指定标签条件，如 ul li:first-child 可为列表首项设置样式；它仅依据位置判断，若第一个子元素不匹配标签类型则失效，例如 p:first-child 在 h2 后的 p 元素上不生效；相比之下，p:first-of-type 不受位置限制，只要求是该类型首个元素；常用于去除评论列表顶部边框、设置首段缩进等场景，使用时需注意 HTML 结构对匹配结果的影响。
:first-child 是CSS中的一个伪类选择器，用来选中父元素下的第一个子元素，前提是该元素满足选择器的条件。我们可以利用它为列表、段落、表格等结构中的首个子元素单独设置样式。
使用 :first-child 的格式如下：
选择器:first-child { 样式声明 }它会匹配作为其父元素的第一个子元素且符合前面选择器条件的元素。
例如，为无序列表中第一个 li 添加红色文字：
这样只有第一个 会被应用红色字体。
这个选择器在以下情况特别实用：
p 加大字体或首行缩进示例：去掉评论列表顶部多余的边框：
.comment-item:first-child {:first-child 只看位置，不看标签类型。如果父元素的第一个子元素不是目标标签，样式不会生效。
比如下面这段HTML：
段落1
段落2
此时 p:first-child 会生效，因为第一个子元素是 p。
但如果改成：
段落1
段落2
那么 p:first-child 就不会匹配任何元素，因为第一个子元素是 h2，而不是 p。
若只想选中第一个 p，不管位置，就不能用 :first-child，而应考虑结合类名或其他逻辑。
注意区分 :first-child 和 :first-of-type：
:first-child 要求必须是父元素的第一个子节点:first-of-type 只要求是该标签类型中的第一个，不强制位置
为第一在上面有 h2 的例子中，p:first-of-type 仍能选中第一个 p，而 p:first-child 不行。
基本上就这些。掌握 :first-child 能帮你更精准地控制页面布局中的起始元素样式，但要注意结构影响匹配结果。