:hover 与 :first-of-type 冲突本质是优先级相同导致层叠覆盖；应合并为 .list-item:hover:first-of-type 确保语义准确且规避竞争。
当 :hover 与 :first-of-type 或 :last-of-type 同时使用出现样式冲突，本质是选择器优先级相同导致后声明的规则覆盖前一个——不是伪类本身冲突，而是 CSS 层叠规则在起作用。
确认选择器权重是否真相同
例如：
.list-item:hover { color: red; }
.list-item:first-of-type { color: blue; }
这两个选择器权重都是 0,1,1,0（1个类名 + 1个伪类），浏览器按源码顺序应用，后写的生效。若想让 hover 下的首项变绿色，不能只靠顺序，得提升优先级：
- 合并写成
.list-item:first-of-type:hover（权重仍为 0,1,1,0，但更具体） - 或用
.list-item:hover:first-of-type（等价，语义更清晰） - 避免拆成两条独立规则去“碰运气”
用组合选择器明确意图
单独写 :first-of-type 是静态状态，:hover 是交互状态，真正要表达的是“ hovered 元素中，如果是第一个类型，就用特殊样式”。所以应直接组合：
立即学习“前端免费学习笔记（深入）”；
.list-item:hover:first-of-type {
background: #e6f7ff;
font-weight: bold;
}
这样既语义准确，又天然规避了和纯 :first-of-type 规则的层叠竞争。
必要时微调优先级（不推荐滥用）
如果已有复杂样式体系难以重构，可小幅提升权重，比如：
- 加一个无意义的类：
.list-item.special:first-of-type:hover - 用属性选择器伪造权重：
.list-item[data-role="item"]:first-of-type:hover -
慎用
!important——它破坏可维护性，仅用于临时调试或第三方组件覆盖
检查 DOM 结构是否影响 :first-of-type 判定
:first-of-type 匹配的是「同类型标签中的第一个」，不是「父容器里第一个子元素」。例如：
-
干扰项
- A
- B
此时 .list-item:first-of-type 仍匹配 A，因为它是 类型中的第一个；但如果你误以为它该匹配 span，就会怀疑选择器失效。hover 时同理——确保你 hover 的元素确实是目标类型。
