純CSS實現點擊一個元素，背景顏色切換

基本思路： 將input與div間隔依次布局，並且將input與div設置相同寬高、相同定位，利用input的:check偽類控制各元素之間的層級關系

HTML如下：

<div class="all">
      <input type="checkbox" class="faux" />
      <div class="box box1"></div>

      <input type="checkbox" class="faux" />
      <div class="box box2"></div>

      <input type="checkbox" class="faux" />
      <div class="box box3"></div>
</div>

CSS如下：

      .all {
        width: 100px;
        height: 100px;
        position: relative;
      }
      .box {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .box1 {
        background: pink;
      }
      .box2 {
        background: wheat;
      }
      .box3 {
        background: skyblue;
      }
      .faux {
        top: 0;
        right: 0;
        position: absolute;
        z-index: 9;
        height: 100%;
        width: 100%;
        opacity: 0;
        cursor: pointer;
      }

      /* 第一輪循環 */
      .faux:checked {
        z-index: 8;
      }
      .faux:checked + .box {
        opacity: 0;
      }

      /* 第二輪循環 */
      .faux:checked:nth-child(1):checked {
        z-index: 9;
      }
      .faux:checked:nth-child(1) + .box {
        opacity: 1;
      }

      .faux:checked:nth-child(1) ~ .faux {
        z-index: 8;
      }
      .faux:checked:nth-child(1) ~ .faux + .box {
        opacity: 0;
      }

      .faux:checked:nth-child(1) ~ .faux:checked {
        z-index: 9;
      }
      .faux:checked:nth-child(1) ~ .faux:checked + .box {
        opacity: 1;
      }

　　

效果如下：