正确写法是将父类名与子元素伪类组合为完整选择器，如.card.active .title:hover；空格和类名顺序决定匹配逻辑，sass/less中&代表当前选择器而非父元素，移动端应避免依赖:hover。
父类名影响子元素 :hover 样式时，选择器必须写全路径
直接在父类里写 .parent :hover 是无效的——这会匹配任意被 .parent 包裹的、处于 hover 状态的元素，不一定是目标子元素。真正要控制的是「当父元素有某类名时，其某个子元素在 hover 时才变样式」，必须把父子关系和伪类连起来写。
常见错误写法：.card:hover .title { color: red; } —— 这是「.card 被 hover 时，.title 变色」，不是「.card 有 .active 类时，.title hover 才生效」。
正确思路是：把父类名作为前提条件，再写子元素 + 伪类的组合选择器：
-
.card.active .title:hover { color: blue; }—— 当 .card 同时有 .active 类，且用户 hover .title 时才触发 - 如果子元素是
<button></button>且想控制它的:disabled下的样式，就得写.form--compact button:disabled { opacity: 0.5; } - 注意空格不能省：
.parent.child .item:hover和.parent.child.item:hover完全是两回事（后者要求单个元素同时拥有三个类）
用 & 嵌套语法（Sass/Less）时，&:hover 指的是当前选择器自身
Sass 的嵌套里，& 代表外层选择器的完整展开结果，不是“父元素”。所以写 .btn { &:hover { ... } } 编译出来是 .btn:hover，而不是子元素的 hover。
要控制子元素的伪类，得显式写出子选择器：
.card {
&.active {
.header {
&:hover {
background: #f0f0f0;
}
}
}
}
编译后是：.card.active .header:hover { ... }。这里 &.active 确保只在父元素带 active 类时才启用整块规则，而 .header:hover 是独立子选择器。
容易踩的坑：
- 误写成
& .header:hover（多一个空格），会导致编译为.card .header:hover，丢失 .active 条件 - 在 Less 中同理，
&:hover不会自动继承父类状态，它只绑定当前选择器 - 如果用 CSS Nesting（原生嵌套草案，Chrome 119+ 支持），语法更接近 Sass，但目前兼容性差，生产环境慎用
伪类生效依赖 DOM 结构稳定性，动态增删父类名时要注意重绘时机
给父元素 JS 动态加 class="active" 后，子元素的 :hover 样式不会“自动激活”——它只在真实鼠标移入时触发。但样式规则本身会立刻生效，只要选择器匹配就参与层叠计算。
这意味着：
- 如果父类名是异步加载后才加上去的（比如 Vue
v-if切换后插入元素），要确保 class 在元素挂载完成后再添加，否则初始 hover 可能不响应 - 用
element.classList.toggle('active')切换时，浏览器会立即重新计算样式，无需手动force reflow - 避免在父元素上同时写
.parent:hover和.parent.active .child:hover，两者可能因层叠顺序或 specificity 冲突，建议统一用后者控制逻辑分支
移动端 :hover 行为不可靠，别单独依赖父类 + :hover 控制交互态
iOS Safari 和部分安卓 WebView 对 :hover 支持极弱：首次点击才触发一次 hover，之后失效；或者根本没 hover 状态。所以 .nav.open .menu-item:hover 在手机上大概率不工作。
替代方案更实际：
- 用
.nav.open .menu-item.is-hovered配合 JS 监听touchstart/mouseenter切换 class - 改用
:focus-within（支持度较好）：.search-box.focus-active input:focus-within + .clear-btn { opacity: 1; } - 对按钮类元素，优先用
:active做按下反馈，它在移动端稳定得多
伪类链式控制看着简洁，但一旦涉及交互态和动态类名，真正在意细节的人很快会发现：浏览器渲染逻辑、事件触发时机、移动端适配，哪一环松动都会让样式“看起来没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
