:first-of-type选中同类型子元素中的第一个，:last-of-type选中最后一个，二者按标签类型匹配，不受类名或ID影响。例如p:first-of-type将样式应用于首个段落，p:last-of-type作用于末尾段落，常用于文章段落、列表项或表单字段的首尾元素样式控制，如去除li:first-of-type上边距、加粗p:last-of-type文字，提升CSS简洁性与可维护性。
在CSS中，:first-of-type 和 :last-of-type 是非常实用的伪类选择器，用于选中某一类型元素中的第一个或最后一个。它们能帮助你在不添加额外类名的情况下，精准控制特定元素的样式。
这两个伪类基于元素的标签类型（如 p、div、li 等）进行匹配：
注意：它们只关心元素的“类型”和它在同类型兄弟中的位置，不依赖于类名或ID。
假设你有以下HTML结构：
立即学习“前端免费学习笔记（深入）”；
<article>你想为第一个和最后一个段落设置特殊样式：
p:first-of-type {这样，“第一段文字”会变成蓝色，“第三段文字”加粗显示。注意 h2 不影响 p 的计数，因为它们是不同类型。
这些伪类特别适合用于内容流中动态生成的结构：
例如，在无序列表中去除首项上边距、末项下边距：
li:first-of-type {基本上就这些。掌握 :first-of-type 和 :last-of-type 能让你更灵活地处理结构化内容，减少对类名的依赖，让CSS更简洁高效。
以上就是如何在CSS中实现:first-of-type与:last-of-type选择特定元素的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
748
收藏
