通过 css :has() 伪类选择器，可在任一子元素被激活时，统一为所有目标元素应用 :active 样式，无需 javascript。该方案语义清晰、性能高效，但需注意浏览器兼容性（chrome 105+、safari 15.4+、firefox 121+ 支持）。
通过 css :has() 伪类选择器，可在任一子元素被激活时，统一为所有目标元素应用 :active 样式，无需 javascript。该方案语义清晰、性能高效，但需注意浏览器兼容性（chrome 105+、safari 15.4+、firefox 121+ 支持）。
要实现“点击任意一个元素，所有同类元素同时进入激活态”的效果，关键在于状态感知的向上委托——CSS 原生 :active 是单元素独占的（按下时仅当前元素匹配），无法跨元素广播。传统思路常误以为可叠加多个 :active 选择器（如 #a:active, #b:active, #c:active），但这只会分别触发各自样式，而非同步联动。
真正的解决方案是利用现代 CSS 的 :has() 伪类：它允许父容器根据子元素的状态（如是否处于 :active）来决定自身是否匹配，进而通过后代/子代选择器批量控制子元素样式。
✅ 正确实现步骤
- 结构化标记：将目标元素包裹在公共父容器中，并赋予统一类名（便于批量选择）；
- 使用 :has() 检测任意子项激活：父容器匹配 :has(.target:active)；
- 批量应用样式：通过 > .target 选择器一次性作用于所有目标子元素。
以下是完整可运行示例：
<div id="main">
<div id="a" class="box">A</div>
<div id="b" class="box">B</div>
<div id="c" class="box">C</div>
</div>
<style>
.box {
height: 100px;
width: 100px;
background-color: red;
font-size: 100px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.15s ease; /* 提升交互反馈 */
}
/* 当 #main 内任意 .box 处于 :active 状态时，所有 .box 同步变蓝 */
#main:has(.box:active) > .box {
background-color: blue;
}
</style>? 原理说明：#main:has(.box:active) 表示“只要 <div id="main"> 的任意直系 .box 子元素当前被鼠标按下（即处于 :active 状态），则该父容器整体匹配”。随后 > .box 选择其所有直系 .box 子元素并统一应用样式——从而实现视觉上的“全局激活”。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项与兼容性
- 浏览器支持：:has() 已在主流现代浏览器中稳定支持（caniuse.com/:has），但 IE 完全不支持，旧版 Edge（≤108）亦不支持。若需兼容较老环境，须降级为 JavaScript 方案（监听 mousedown/mouseup 并切换 .active-all 类）。
- 性能提示：:has() 在复杂嵌套或高频交互场景下可能影响渲染性能，建议仅用于明确可控的简单容器（如本例中的 3 个元素）。
- 移动端适配：:active 在触摸设备上同样生效（对应 touchstart），但部分 Android 浏览器需添加 * { touch-action: manipulation; } 以确保及时响应。
- 无障碍友好性：该方案纯 CSS，不干扰键盘焦点流（Tab 导航仍正常），符合 WCAG 基础要求。
✅ 总结
无需 JavaScript，仅靠 :has() + 结构化 HTML 即可优雅实现多元素协同 :active 效果。它体现了现代 CSS 的声明式表达力——关注“什么状态应触发什么样式”，而非“如何用脚本手动管理状态”。在兼容性允许的前提下，这是语义更优、维护成本更低的标准解法。
