p:first-of-type不能用于“每组分类的首个卡片”，因为它只在同父元素的直接子节点中按标签名匹配第一个，不识别分组逻辑；必须用.category > .card:first-of-type等层级限定写法，或现代浏览器中用h3:has(+ .card) + .card兜底。
为什么 p:first-of-type 不能直接用于“每组分类的首个卡片”
因为 :first-of-type 只在**同一父元素的直接子节点中**按标签名找第一个，它不识别“分组”逻辑。如果你的卡片结构是多个 .card 散落在一个容器里（比如 .list），那 .card:first-of-type 只会命中整个列表里的第一个 .card，而不是每个分类块里的第一个。
.category > .card:first-of-type 是最简可靠的写法
关键在用 > 限定作用域——强制只匹配每个分类容器的**直接子级卡片**。
- 必须确保每个分类有独立容器，例如：
<section class="category"><div class="card">...</div></section> -
.category > .card:first-of-type才会为每个.category下的第一个.card生效 - 如果卡片嵌套在
.category > .grid > .card里，就得写成.category > .grid > .card:first-of-type，中间层级不能省 - 避免写成
.category .card:first-of-type（无>）——这会匹配所有后代，包括子分类、弹窗卡片等意外节点
当分类容器没有统一类名时，用 :has() + :first-of-type 组合兜底（现代浏览器）
比如分类靠 <h3></h3> 标题触发，后面紧跟着若干卡片：
<h3>推荐商品</h3> <div class="card">...</div> <div class="card">...</div> <h3>新品上架</h3> <div class="card">...</div>
此时可这样写（Chrome 105+ / Firefox 103+ / Safari 15.4+ 支持）：
h3:has(+ .card) + .card {
border-top: 2px solid #333;
}
这不是 :first-of-type，但解决了同类问题：它精准捕获「紧跟在 h3 后面的第一个卡片」，且天然按组隔离。
容易被忽略的兼容性断层
:first-of-type 本身 IE8+ 都支持，但真正卡住的是组合场景：
-
.category > .card:first-of-type在 IE9+ 没问题，IE8 会完全忽略整条规则（不回退到.card:first-of-type） -
:has()在 IE 和旧 Edge 中彻底不可用，上线前务必查构建工具是否误启了 Autoprefixer 的过旧目标配置 - 若需兼容 IE8–9，唯一稳解是服务端或 JS 注入 class，如
<div class="card card-first">，再写 <code>.card-first规则真正在意“每组首个”的时候，往往意味着结构已有语义分组——别绕远路用选择器猜逻辑，直接用层级约束或显式标记，更可控。
