如何通过JavaScript监听子元素状态，用CSS模拟Has选择器并动态切换父元素类名？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1025个文字，预计阅读时间需要5分钟。
因为 `:has()` 是 CSS Selectors Level 4 的新特性，Chrome 105、Firefox 103 和 Safari 15.4+ 才开始支持；IE 完全不支持，旧版 Edge（EdgeHTML）也直接忽略。如果你的项目还需要兼容 IE11 或 Android 4.4 WebView，建议使用 `:has()` 的替代方法，例如：
用 JS 监听子元素变化并切换父元素 class 的实操要点
核心思路是：不依赖 CSS 选择器能力，改由 JS 检测子元素是否满足条件（比如是否存在 .active、是否含有 data-invalid="true"），然后手动给父元素添加/移除一个明确的 class（如 has-active），再用传统 CSS 写样式。
本文共计1025个文字，预计阅读时间需要5分钟。
因为 `:has()` 是 CSS Selectors Level 4 的新特性，Chrome 105、Firefox 103 和 Safari 15.4+ 才开始支持；IE 完全不支持，旧版 Edge（EdgeHTML）也直接忽略。如果你的项目还需要兼容 IE11 或 Android 4.4 WebView，建议使用 `:has()` 的替代方法，例如：
用 JS 监听子元素变化并切换父元素 class 的实操要点
核心思路是：不依赖 CSS 选择器能力，改由 JS 检测子元素是否满足条件（比如是否存在 .active、是否含有 data-invalid="true"），然后手动给父元素添加/移除一个明确的 class（如 has-active），再用传统 CSS 写样式。