:hover下:first-child与:last-child样式冲突本质是优先级相同导致后定义规则覆盖，当元素首尾重合时总生效后者；可通过提升特异性、改用结构定位或JS动态加类解决。
当 :hover 下同时使用 :first-child 和 :last-child 出现样式冲突，本质是选择器优先级相同导致后定义的规则覆盖前一个——不是伪类本身冲突，而是 CSS 层叠规则在起作用。
明确冲突根源：同级选择器优先级相等
例如：
.list-item:hover:first-child { color: red; }
.list-item:hover:last-child { color: blue; }如果某个元素**既是第一个又是最后一个**（比如列表只剩一项），两个规则权重完全一样（都是 0,1,2），浏览器按 CSS 文件中**后出现的规则生效**，结果总是蓝色。
用结构位置代替语义伪类
避免依赖 :first-child/:last-child 的模糊匹配，改用更确定的定位方式：
立即学习“前端免费学习笔记（深入）”；
- 给首项加 class：
<div class="list-item first">…</div>，写.list-item:hover.first { … } - 用
:nth-child(1)或:nth-last-child(1)，它们和:first-child行为一致，但组合后可提升 specificity（如.list-item:hover:nth-child(1)权重略高） - 若容器固定，直接选子元素：
.list:hover > :first-child比.list-item:hover:first-child更具上下文约束
提高选择器特异性（Specificity）
在不改 HTML 的前提下，通过增加类名或父级来拉开优先级差距：
.list .list-item:hover:first-child { color: red; } /* 0,2,2 */
.list .list-item:hover:last-child { color: blue; } /* 0,2,2 */两者仍相同？那就再加一层：
.list > .list-item:hover:first-child { color: red; }
.list > .list-item:hover:last-child { color: blue; }此时 > 子选择器让权重保持一致，但结合实际 DOM 结构，往往能规避单元素“首尾重叠”的情况。
用 JavaScript 做最终兜底（少量场景适用）
当样式逻辑复杂、纯 CSS 难以穷举时，可动态加 class：
const items = document.querySelectorAll('.list-item');
items.forEach((el, i) => {
el.addEventListener('mouseenter', () => {
el.classList.toggle('is-first', i === 0);
el.classList.toggle('is-last', i === items.length - 1);
});
});然后写：
.list-item:hover.is-first { color: red; }
.list-item:hover.is-last { color: blue; }这样语义清晰、无优先级竞争，适合需要精确控制的交互场景。
