:first-of-type 选择父元素中某类型第一个子元素，如 p:first-of-type 选中首个 p；:last-of-type 则选中该类型最后一个子元素，如 p:last-of-type 选中末个 p；两者均仅在同类型标签内按顺序匹配，忽略其他标签类型影响。
:first-of-type 和 :last-of-type 是 CSS 中的结构伪类，用于选择父元素中特定类型的第一个或最后一个子元素。它们的区别在于匹配的位置方向不同。
1. :first-of-type 的作用
该伪类选择父元素中同类型标签的第一个元素。
例如，在一段内容中选择第一个段落 p：- 如果有多个
p标签，:first-of-type 会选中其中最先出现的那个。 - 即使前面有其他类型的标签（如 h2、div），只要它是第一个 p，就会被选中。
示例代码：
这是第一个段落
立即学习“前端免费学习笔记（深入）”；
一些文字
这是第二个段落
使用 p:first-of-type 会选中“这是第一个段落”这个元素。
2. :last-of-type 的作用
与前者相反，它选择父元素中同类型标签的最后一个元素。
继续以上面的例子：- 尽管中间夹杂了 span 或其他标签，只要某个 p 是所有 p 中最后一个，就会被 :last-of-type 选中。
- 这个选择器不关心后面是否还有别的标签类型，只关注该类型自身的出现顺序。
示例代码：
第一段
一个 div
最后一段
p:last-of-type 会选中“最后一段”，即使后面没有其他 p，它也是唯一且最后一个。
3. 关键区别总结
- :first-of-type 匹配某一类型子元素中的首个实例。
- :last-of-type 匹配某一类型子元素中的末个实例。
- 两者都基于元素类型（如 p、div、li）进行筛选，而不是整体位置。
- 忽略其他标签类型的影响，只在同类标签内比较位置。
基本上就这些。理解它们的关键是记住“同类型”和“在父容器中的顺序”。
