如何仅用HTML+CSS实现多样式循环切换（无需JavaScript）

先快速回顾下大家都熟悉的双状态切换技巧——用<input type="checkbox">配合<label>实现点击切换样式，代码很经典：

input { display: none; }
input:checked + label { background: green; }
label { 
  background: yellow; 
  cursor: pointer; 
  display: block; 
  height: 100px; 
  width: 100px; 
}

<input type="checkbox" id="toggle">
<label for="toggle"></label>

那你问的循环切换多种样式（比如点击1→红、点击2→黄、点击3→蓝、点击4→红...），纯HTML+CSS能不能实现？当然可以！

先看你给出的实现方案，思路是对的——用同组radio按钮记录状态，通过:checked选择器控制样式和可点击的label。不过咱们可以做些简化，让代码更简洁、可读性更强：

优化后的实现代码 #

/* 隐藏所有radio和默认状态下的label */
input, label {
  display: none;
}

/* 目标元素的基础样式 */
.toggle-box {
  width: 100px;
  height: 100px;
  position: relative; /* 让内部label可以绝对定位 */
}

/* 不同选中状态对应的目标样式 */
#toggle-1:checked ~ .toggle-box { background: red; }
#toggle-2:checked ~ .toggle-box { background: yellow; }
#toggle-3:checked ~ .toggle-box { background: blue; }

/* 控制当前可点击的label显示，并铺满整个目标区域 */
#toggle-1:checked ~ .toggle-box [for="toggle-2"],
#toggle-2:checked ~ .toggle-box [for="toggle-3"],
#toggle-3:checked ~ .toggle-box [for="toggle-1"] {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
}

<!-- 同组radio，同一时间只能选中一个，用来标记当前状态 -->
<input type="radio" name="toggle-set" id="toggle-1" checked>
<input type="radio" name="toggle-set" id="toggle-2">
<input type="radio" name="toggle-set" id="toggle-3">

<!-- 样式切换的目标容器 -->
<div class="toggle-box">
  <label for="toggle-1"></label>
  <label for="toggle-2"></label>
  <label for="toggle-3"></label>
</div>

优化点说明 #

1. 语义化命名：给目标容器加了类名.toggle-box，radio和label的ID也更清晰（toggle-1/toggle-2），后续维护起来更方便
2. 点击区域优化：给可点击的label加了绝对定位，确保整个目标容器区域都能被点击，不用局限于label本身的大小
3. 代码结构更清晰：把基础样式、状态样式、交互控制样式分开，逻辑一目了然
4. 扩展性强：如果要加第4种样式，只需要新增一个radio、对应的label，再补充两行CSS规则就行

这个方案完全基于HTML+CSS，不需要任何JS就能实现循环切换多种样式的效果~

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