css两个radio按钮切换

CSS中有一个很有用的功能是使用两个radio按钮进行不同样式的切换。我们可以利用:checked伪类与 ~ 兄弟选择器，将两个radio按钮的不同状态与对应样式联系起来。

 <input type="radio" name="switch" id="switch1" checked>
  <input type="radio" name="switch" id="switch2">
  
  #switch1:checked ~ #box1,
  #switch2:checked ~ #box2 {
    display: block;
  }
  
  #box1,
  #box2 {
    display: none;
  } 

上面的代码中，我们定义了两个radio按钮，分别对应id为“switch1”和“switch2”。同时，我们也定义了两个元素，分别对应id为“box1”和“box2”的容器元素。

在CSS中，我们使用:checked伪类对应选中状态的radio按钮，并使用 ~ 兄弟选择器与对应的容器元素建立联系。当某个radio按钮被选中时，对应的容器元素就会变为display: block，显示在页面上；而其余容器元素则被设置为display: none，不会在页面上显示。

使用这种方式，我们可以轻松实现多种不同样式的切换效果，如选项卡、图片轮播等。这种方式既简单实用，还能帮助我们思考如何在代码中提高可复用性和可维护性。