In frontend development, we often encounter these requirements:

• Parent element styles depending on child element states — Such as navigation bars where parent <li> needs to highlight based on whether child <a> has .active.
• Layout changes with content — For example, CSS Grid containers switching column numbers when child elements exceed a threshold.
• Interaction-driven parent styles — During form validation, parent <form> changes state based on the validity of internal <input> elements.

Previously, these scenarios could only rely on JavaScript: traversing the DOM to query child elements, then manually adding classes to parent elements. This not only increased code volume but also scattered logic between CSS and JS, reducing maintainability.

在前端开发中，我们经常会遇到以下需求：

• 父元素样式依赖子元素状态 —— 如导航栏中，父级 <li> 需根据子 <a> 是否 .active 来高亮。
• 布局随内容变化 —— 比如 CSS Grid 容器在子元素数量超过阈值时切换列数。
• 交互驱动父级样式 —— 表单验证时，父级 <form> 根据内部 <input> 的合法性改变状态。

过去，这类场景往往只能靠 JavaScript：通过 DOM 遍历查询子元素，再手动给父元素加 class。这样不仅增加代码量，也让逻辑分散在 CSS 与 JS 之间，降低可维护性。