:first-of-type 选择同类型子元素中的首个元素，如 p:first-of-type 匹配首个 p 标签，不一定是父元素的第一个子节点，与 :first-child 不同，后者要求必须是第一个子元素。
:first-of-type 是 CSS 中的一个结构伪类选择器，它的作用是选中父元素下同类型元素中的第一个子元素。
基本作用说明
这个选择器会匹配在父容器中具有相同标签名且为该类型首个出现的元素。它不关心元素在所有子元素中的顺序，只关注其元素类型的首次出现。
例如，如果有多个 p 标签、div 标签混排，:first-of-type 会选择每个类型中第一个出现的那一个。
Nextcloud Server
Nextcloud服务器是一款免费且开源的服务器软件，它允许您将所有数据存储在您选择的服务器上。通过Nextcloud，您可以轻松访问和存储位于您信任的数据中心的数据，将数据在各种设备之间同步，并共享您的数据以进行协作。它提供了自托管文件同步和共享领域中最佳的安全性，并且可以通过数百个应用进行扩展。
7 查看详情
使用示例
假设有如下 HTML 结构：
标题
第一段文字
第二段文字
第三段文字
对应的 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 可以。基本上就这些。理解这个选择器的关键是“同类型中的第一个”，而不是“所有子元素中的第一个”。
以上就是在css中:first-of-type选择器作用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/996500.html
微信扫一扫 
支付宝扫一扫 
