最常用可靠的方式是父级类名配合后代选择器：用空格匹配所有子孙，用>匹配直接子元素；多状态组合需类名叠加；注意类名拼写、避免ID/内联样式及过度嵌套。
直接用父级类名配合后代选择器是最常用、最可靠的方式——只要父元素有某个类，它下面的特定子元素就响应变化。
基础写法：父类名 + 空格 + 子元素选择器
这是 css 原生支持的标准写法，不需要 js，也不依赖伪类限制。
- 父元素加状态类（比如 .is-active、.theme-dark、.collapsed）
- 在 CSS 中写：.is-active .menu-item { color: #fff; background: #007bff; }
- 空格代表“后代”，会匹配所有层级的子孙，不限直接子元素
想只影响直接子元素？用 > 符号
如果只想改父元素的**直系子代**，避免深层嵌套也被影响，就把空格换成 >：
- .card.is-expanded > .card-header { display: none; }
- 这样只有 .card-header 是 .card.is-expanded 的直接子元素时才生效
- 内部再嵌套一层的同名元素不会被误中
多个状态组合？类名叠加即可
一个父元素可以同时有多个类，CSS 会自然识别组合条件：
立即学习“前端免费学习笔记（深入）”；
- html：…
- CSS：.form-group.has-Error.is-disabled input { opacity: 0.6; cursor: not-allowed; }
- 三个类必须同时存在，子元素才会应用该样式
注意避坑点
这类联动看似简单，但容易忽略几个实际问题：
- 类名要提前定义好，JS 切换类时确保拼写和大小写完全一致
- 不要用 ID 或内联 style 控制状态——CSS 无法根据 style 属性选中父级来改子级
- 避免过度嵌套选择器，比如 .page .main .content .list .item.active，既难维护又可能被更高优先级样式覆盖
- 如果子元素本身也有同名类（如 .active），记得确认是父级状态驱动，还是子级自身状态，别混淆逻辑
基本上就这些。核心就是：状态写在父级 class 上，样式规则用空格或 > 关联子元素——不复杂但容易忽略细节。