:first-of-type用于选中父元素下某标签类型的第一个子元素，如p:first-of-type设置首个p标签样式；与:first-child不同，它只关注同类型标签中的第一个，不受兄弟元素位置影响，适用于无需class即可样式化首项的场景。
在CSS中，:first-of-type 是一个非常实用的伪类选择器，它用于选中父元素下某一类型中的第一个子元素，并为其设置样式。这个“类型”指的是标签名称，比如 p、div、li 等。
:first-of-type 的写法是在标签名后加上该伪类：
p:first-of-type {上面的规则表示：选中父容器中第一个 p 标签，并将其文字颜色设为红色。
假设你有一段HTML内容如下：
立即学习“前端免费学习笔记（深入）”；
这是第一段
这是第二段
第三段
你想只给每个类型中的第一个元素加样式，可以这样写：
p:first-of-type {结果是：
:first-of-type 和 :first-child 不一样。前者关注的是“同类型标签的第一个”，后者要求该元素必须是父元素下的第一个子节点。
例如：
段落
第二个段落
在这个例子中：
使用 :first-of-type 时需注意：
基本上就这些。合理使用 :first-of-type 可以让你在不添加额外 class 的情况下，精准控制页面中同类元素的首个实例样式。不复杂但容易忽略。
以上就是如何在CSS中使用:first-of-type选择器_选中同类型首个元素设置样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
898
收藏
