本文介绍如何让多个独立元素在任一元素被点击时，全部同时应用 :active 样式效果，无需 javascript，仅用现代 css 的 :has() 伪类即可优雅实现。
本文介绍如何让多个独立元素在任一元素被点击时，全部同时应用 :active 样式效果，无需 javascript，仅用现代 css 的 :has() 伪类即可优雅实现。
在标准 CSS 中，:active 伪类仅作用于当前正被用户激活（如鼠标按下）的那个元素本身，它不具备“广播”或“联动”能力。因此，像下面这样直接并列写多个选择器：
#a:active, #b:active, #c:active {
background-color: blue;
}只会使被点击的单个元素变色，其余保持原样——这正是问题中观察到的行为。
要实现「点任意一个，全部响应」的效果，关键在于状态感知的提升：我们需要一个“容器级”的状态判断机制，能检测其内部是否存在处于 :active 状态的子元素，并据此统一控制所有目标子元素的样式。CSS 新增的 :has() 伪类恰好提供了这一能力。
✅ 正确解法如下：
立即学习“前端免费学习笔记（深入）”；
- 结构上归组：将需联动的元素包裹进同一个父容器，并赋予统一的 class（便于批量选择）；
- 样式上驱动：利用 :has(.target:active) 判断父容器内是否有 .target 处于激活态，若成立，则通过后代/子代选择器统一设置所有 .target 的样式。
示例完整代码：
<div id="main">
<div id="a" class="item">A</div>
<div id="b" class="item">B</div>
<div id="c" class="item">C</div>
</div>
<style>
.item {
height: 100px;
width: 100px;
background-color: red;
font-size: 100px;
margin-bottom: 20px;
transition: background-color 0.15s ease; /* 推荐添加过渡，提升体验 */
}
/* 当 main 内任意 .item 处于 :active 状态时，所有 .item 应用蓝色背景 */
#main:has(.item:active) > .item {
background-color: blue;
}
</style>? 关键说明：
- #main:has(.item:active) > .item 表示：“如果 #main 元素内存在一个处于 :active 状态的 .item，那么选中其所有直接子元素 .item 并应用样式”；
- 使用 >（子选择器）而非空格（后代选择器），可避免样式意外穿透到嵌套更深的同类元素，增强可控性；
- :has() 目前在 Chrome 105+、Edge 105+、Safari 15.4+ 及 Firefox 121+ 中已稳定支持（caniuse.com/:has），生产环境使用前建议按目标浏览器范围评估兼容性；
- 若需兼容不支持 :has() 的旧浏览器，才需回退至轻量级 JavaScript 方案（例如监听 mousedown/mouseup 事件切换 .all-active 类），但本题明确优先纯 CSS 解法，故非必需。
? 小结：
:active 本身不可跨元素传播，但借助 :has() 提供的“条件式父容器匹配”能力，我们得以将局部交互行为升维为容器级样式响应逻辑。这是一种典型的现代 CSS 思维转变——从“元素驱动样式”转向“结构与关系驱动样式”。合理运用 :has()，可显著减少对 JS 的样式干预依赖，写出更简洁、声明式、可维护的交互逻辑。
