在css中:first-of-type选择器作用

:first-of-type 选择同类型子元素中的首个元素，如 p:first-of-type 匹配首个 p 标签，不一定是父元素的第一个子节点，与 :first-child 不同，后者要求必须是第一个子元素。

:first-of-type 是 css 中的一个结构伪类选择器，它的作用是选中父元素下同类型元素中的第一个子元素。

基本作用说明

这个选择器会匹配在父容器中具有相同标签名且为该类型首个出现的元素。它不关心元素在所有子元素中的顺序，只关注其元素类型的首次出现。

例如，如果有多个 p 标签、div 标签混排，:first-of-type 会选择每个类型中第一个出现的那一个。

Type

生成草稿，转换文本，获得写作帮助-等等。

35

查看详情

使用示例

假设有如下 html 结构：

<article>   <h2>标题</h2>   <p>第一段文字</p>   <p>第二段文字</p>   <img src="1.jpg" alt="">   <img src="2.jpg" alt="">   <p>第三段文字</p> </article>

对应的 CSS：

p:first-of-type {   color: red; } img:first-of-type {   border: 3px solid blue; }

结果：

• 第一个 p 元素（“第一段文字”）会被设为红色，因为它是所有 p 标签中的第一个。
• 第一个 img 元素会有一个蓝色边框。

与 :first-child 的区别

:first-of-type 更灵活，不要求目标元素是父元素的第一个子节点，而 :first-child 要求必须是第一个子元素。

• 如果第一个子元素不是目标类型，:first-child 不会匹配，但 :first-of-type 仍可命中该类型第一个出现的元素。
• 比如上面例子中，p 不是第一个子元素（h2 才是），所以 p:first-child 不会生效，但 p:first-of-type 可以。

基本上就这些。理解这个选择器的关键是“同类型中的第一个”，而不是“所有子元素中的第一个”。