最常用可靠的方式是父级类名配合后代选择器：用空格匹配所有子孙，用>匹配直接子元素；多状态组合需类名叠加；注意类名拼写、避免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 会自然识别组合条件：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

立即学习“前端免费学习笔记（深入）”；

• 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 上，样式规则用空格或 > 关联子元素——不复杂但容易忽略细节。