伪类样式失效的根本原因是权重相同或不足，而非书写数量；需通过复用组件库选择器结构、添加容器锚点、属性选择器定位或调整挂载容器等方式提升权重与作用域匹配度。
伪类样式（如 :hover、:focus、::before）被第三方组件库覆盖，根本原因不是“写得不够多”，而是你写的 .btn:hover 和组件库的 .el-button:hover 权重一样（都是 0,0,1,1），浏览器按加载顺序或选择器结构判输赢——而组件库往往更“具体”或更晚注入。
为什么 :hover 写了却没生效？
伪类本身不提升特异性：.btn:hover 和 .btn 权重完全相同。一旦组件库用了更重的选择器（比如 .el-button.is-primary:hover 或 button.el-button:focus），你的规则就直接被划掉。
- 打开 DevTools → Elements → 选中元素 → Styles 面板，看被划掉的
:hover规则来自哪个文件、权重多少（Specificity 列） - 检查是否用了 ID 或属性选择器：比如
#header .btn:hover权重是 0,1,1,1，远高于.btn:hover - 确认组件是否动态插入到
document.body（如弹窗、Tooltip）——你的局部选择器根本匹配不到
怎么安全提高伪类选择器权重？
不要堆 !important，优先复用组件库原选择器结构，确保权重对等、顺序可控。
- 查 DevTools 中生效的原始规则，比如它是
.n-button.n-button--primary:hover，你就照抄结构写：.n-button.n-button--primary:hover - 加一层容器锚点：
.my-page .n-button:hover（权重 0,0,2,1），比原生.n-button:hover（0,0,1,1）高一级 - 用属性选择器定位动态类：
[class*="ant-btn-primary"]:hover，避免因哈希类名（如ant-btn-primary-abc123）失效 - 避免写
:deep(.el-button):hover—— Vue 的:deep()不支持伪类链式写法，会被编译丢弃
遇到 JS 动态插入的伪类（如 Modal、Popover）怎么办？
这类组件默认 append 到 document.body，脱离你所有 scoped 或容器前缀的作用域，CSS 选择器再强也无效。
立即学习“前端免费学习笔记（深入）”；
- 初始化时显式传
container选项：new ElNotification({ container: '.my-app' }) - Vue 组件用
teleport指向业务容器：<teleport to=".my-app"><el-dialog></el-dialog></teleport> - 若组件不支持 container，只能靠全局样式 + 高权重选择器，例如：
body .el-notification__content:hover - Shadow DOM 场景下，伪类必须用
::part()（如果组件支持），比如my-date-picker::part(trigger):hover
真正难的不是写出能生效的伪类，而是让它的作用域、加载时机、权重层级在开发、HMR、构建、部署各环节都稳定一致——尤其当组件库自己也用 !important 或内联 style 时，CSS 层叠就变成一场无声的优先级军备竞赛。
