css如何实现点击盒子1改变背景颜色后，再点击盒子2改变背景颜色，同时盒子1变回原来的颜色

在CSS中，直接通过样式无法实现这样的交互效果，因为CSS主要用于描述元素的布局和呈现，而非动态处理。不过，你可以结合JavaScript或jQuery来达成这个目标。这里提供一种简单的JavaScript实现思路：

HTML部分:

<div id="box1" onclick="changeColor(1)">盒1</div>
<div id="box2" onclick="changeColor(2)">盒2</div>

CSS部分:

#box1 {
  background-color: initial; /* 默认颜色 */
}

#box2 {
  background-color: initial; /* 默认颜色 */
}

JavaScript函数:

function changeColor(boxNum) {
  var boxes = document.getElementById('box1'), box2 = document.getElementById('box2');
  
  if (boxNum === 1) {
    boxes.style.backgroundColor = 'new-color-for-box1'; // 新的颜色，替换为实际颜色
    box2.style.backgroundColor = 'initial'; // 回到默认颜色
  } else {
    boxes.style.backgroundColor = 'initial'; // 回到默认颜色
    box2.style.backgroundColor = 'new-color-for-box2'; // 新的颜色，替换为实际颜色
  }
}

在这个例子中，当点击`box1`时，它的背景色会变为新的颜色，并将`box2`的背景色恢复为初始；反之亦然。