:first-of-type不等于第一个子元素，因为它只匹配同类型标签中首个出现的元素，忽略前置的其他标签、注释或空白文本节点；例如中仅第一个匹配p:first-of-type。
为什么 :first-of-type 不等于第一个子元素
它只看「同类型标签中谁最先出现」，不care前面有没有别的标签或空白节点。比如父容器里是 <p></p>
<div></div>
<p></p>，那么第二个 <p></p> 不会匹配 p:first-of-type——因为第一个 <p></p> 才是 p 类型里的首个实例。
常见错误现象：ul li:first-of-type 没生效，实际可能是 <ul></ul> 开头有注释、换行文本节点，或者混了 <li> 以外的标签（如 <template></template> 或 <script></script>）。这些节点虽不可见，但仍是子节点，会干扰 :first-child，却**不影响** :first-of-type 的计算逻辑。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
:first-of-type只统计同标签名的兄弟元素，忽略 class、id、属性、文本、注释、<script></script> - 若父元素下没有该类型元素，选择器自然不匹配任何东西
- 它不要求目标是父元素的第一个子节点，只要求它是该类型中的第一个
:last-of-type 怎么选“最后一个”，又容易在哪翻车
:last-of-type 是对称逻辑：在所有同类型兄弟中，找 DOM 顺序上最靠后的那个。例如 <div>
<p>1</p>xxx<p>2</p>
<p>3</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>，第三个 <p></p> 匹配 p:last-of-type；哪怕中间插了文本，只要它还是最后一个 <p></p>，就成立。
但动态场景下容易出问题：
- JS 插入新
<p></p>后，原来匹配:last-of-type的元素会立刻失效 - 它不能跨层级工作——子元素的
:last-of-type不受孙元素影响 - 和
:nth-last-of-type(1)功能等价，但后者语义更直白，可读性略高
:first-of-type 和 :first-child 到底差在哪
这是最常混淆的一对。简单说：:first-child 要求元素必须是父元素的**第一个子节点**，且类型不限；而 :first-of-type 只要求它是该类型里的第一个，前面可以有任意其他标签。
典型误用场景：
- 想给文章第一段去顶边距，写了
p:first-child，结果没生效——因为<p></p>前面有个<h1></h1>或注释节点 - 用
div:first-child选首块区域，但页面开头加了<header></header>，就断掉了 - 此时换成
p:first-of-type或div:first-of-type就能稳稳命中
什么时候该用 :first-of-type 和 :last-of-type
它们适合「按类型做首尾微调」的场景，尤其是内容结构不可控时（CMS 输出、Markdown 渲染、用户富文本）。
实用例子：
- 清除首段上边距：
article p:first-of-type { margin-top: 0; } - 隐藏末项分割线：
nav a:last-of-type { border-right: none; } - 为混合列表中第一个图片去边框：
img:first-of-type { border: 0; } - 当某类型只有一个元素时，
:first-of-type和:last-of-type会同时匹配它——这点要留意，别意外覆盖样式
兼容性不是问题：IE9+、所有现代浏览器都支持。真正要注意的是——它们只看标签名，不看语义、不看渲染顺序、也不响应 JS 动态插入后的位置变化。用之前，先 inspect 元素确认父级下的真实兄弟结构。
