css三个盒子绑定一个动态class 点击第一个盒子其他两个盒子不变

可以使用JavaScript来实现这个功能。

首先，在HTML中给三个盒子设置一个共同的类名（例如：box）和一个唯一的id。

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>

然后，在CSS中定义一个动态class（例如：active），并给其设置样式。

.active {
  background-color: red;
}

最后，在JavaScript中绑定点击事件，当点击第一个盒子时，添加动态class，同时移除其他两个盒子的动态class。

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');

box1.addEventListener('click', function() {
  box1.classList.add('active');
  box2.classList.remove('active');
  box3.classList.remove('active');
});

这样，当点击第一个盒子时，它会添加动态class（active）并变红，其他两个盒子不会发生变化。