chrome和firefox的:hover不一致源于伪类触发时机与继承规则差异；ie11的!important按声明顺序处理；z-index受层叠上下文限制；data-theme失效多因优先级或继承链断裂。
Chrome 和 Firefox 里 :hover 样式表现不一致
不是浏览器 bug，而是它们对伪类触发时机和继承规则的实现细节不同。比如在低版本 Firefox 中，:hover 对 <option></option> 无效，而 Chrome 允许部分样式生效；又比如嵌套 div > a:hover 在某些旧版 Safari 下会忽略父级层级限制。
实操建议：
- 避免依赖
:hover控制关键交互逻辑（如显示/隐藏菜单），改用 JS 监听mouseenter/mouseleave更可靠 - 测试时至少覆盖 Chrome、Firefox、Edge（Chromium 内核）三端，Safari 单独加测——它的层叠解析最保守
- 如果必须用 CSS 模拟 hover 效果，优先写成
.btn:hover而非div .btn:hover，减少层级判断负担
用 !important 强行覆盖却在 IE11 失效
IE11 对 !important 的解析有特殊限制：当两个规则都带 !important，且选择器权重相同时，它按声明顺序而非规范定义的“后声明优先”处理，容易回退到前一条规则。
实操建议：
- 别把
!important当万能解药，先检查是否因未加:root或媒体查询导致作用域失效 - 在 IE11 环境下，用更具体的选择器替代
!important，例如把.card .title改成body .card .title - 如果用了 CSS-in-JS（如 styled-components），确认其生成的 class 名是否被 IE11 的哈希截断或重复复用
多个 .modal-overlay 嵌套时 z-index 层级错乱
z-index 不是全局排序，而是按「层叠上下文」分组计算。只要父元素设置了 position: relative + z-index，子元素的 z-index 就只在该上下文中比较，跨上下文直接不可比。
实操建议：
- 检查所有可能创建新层叠上下文的属性：
opacity 、<code>transform、filter、will-change，哪怕只是临时加了transform: translateY(0)也会触发 - 统一用数字型
z-index值（如z-index: 1000），避免用auto或initial，IE 和老 Android 浏览器对这些值支持不稳 - 给最外层模态框容器加
isolate: isolate（现代浏览器）或transform: translateZ(0)（兼容方案），强制它成为独立层叠上下文根节点
用 [data-theme="dark"] .btn 切换主题但部分按钮没变色
问题常出在选择器优先级被其他规则压制，或者属性继承链断裂。比如 .btn:focus 的颜色设在更靠后的 CSS 文件里，又或者 color 被 currentColor 或 inherit 覆盖，导致 data 属性切换后无法穿透。
实操建议：
- 打开 DevTools 的 Computed 面板，看目标元素最终
color值来自哪条规则，右键“Reveal in Sidebar”快速定位冲突源 - 把主题相关样式集中在一个文件里，用
[data-theme="dark"]作为顶层包裹，避免分散在多个组件 CSS 中 - 慎用
all: unset或all: revert，它们会清掉继承链，让 data 属性控制失效
真正麻烦的从来不是怎么写选择器，而是哪个父级悄悄建了个层叠上下文，或者哪条看似无关的 opacity 规则正在静默劫持你的 z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
