如何实现点击任意目标元素时，多个元素同时触发:active伪类效果？

方案一：纯CSS实现（需调整HTML结构） #

将三个<div>包裹在父容器内，利用父容器的:active伪类统一控制所有子元素样式。点击父容器内任意子元素时，父容器触发:active状态，所有子元素同步变色。

完整代码：

<div class="container">
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
</div>

<style>
#a, #b, #c {
  height: 100px;
  width: 100px;
  background-color: red;
  font-size: 100px;
  margin-bottom: 20px;
}

.container:active #a,
.container:active #b,
.container:active #c {
  background-color: blue;
}
</style>

方案二：原生JavaScript实现（无需修改原有HTML结构） #

给每个元素绑定点击事件，点击时同步修改三个元素的样式。用CSS类管理样式，更易维护。

完整代码：

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

<style>
#a, #b, #c {
  height: 100px;
  width: 100px;
  background-color: red;
  font-size: 100px;
  margin-bottom: 20px;
}

/* 新增类控制变色状态 */
#a.active, #b.active, #c.active {
  background-color: blue;
}
</style>

<script>
// 获取目标元素集合
const targetElements = [
  document.getElementById('a'),
  document.getElementById('b'),
  document.getElementById('c')
];

// 给每个元素绑定点击事件
targetElements.forEach(el => {
  el.addEventListener('click', () => {
    // 切换所有元素的active类（点击一次变蓝，再点变红）
    targetElements.forEach(item => item.classList.toggle('active'));
  });
});
</script>

如果需要点击仅触发一次变色（不切换回原色），把classList.toggle替换为classList.add；若需点击页面其他区域恢复原色，可额外监听文档点击事件来移除active类。

内容的提问来源于stack exchange，提问作者user22224316