在css中:first-of-type选择器作用-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-22 21:49:01

原创

956人浏览过

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

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

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

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

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

Type

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

假设有如下 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;
}

登录后复制

结果：

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

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

以上就是在css中:first-of-type选择器作用的详细内容，更多请关注php中文网其它相关文章！

大家都在看：