css 单选框不重复选

CSS单选框是常用的表单元素之一，它能够让用户在一组选项中选择一个。然而，有时候我们需要确保用户只能选择其中一个选项，而不是重复选择或者不选择。

/* HTML代码 */
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

/* CSS代码 */
input[type=radio]:checked ~ input[type=radio]{
  display:none;
}

在上述代码中，我们使用了CSS的伪类选择器:checked来选中被选中的单选框，然后使用CSS兄弟选择器 ~ 来选中它后面的单选框，然后将它们的display属性设为none，这样用户就无法看到和选择后面的单选框。

使用CSS来实现单选框不重复选的效果非常简单，而且可以避免使用Jquery等JavaScript库带来的额外代码和性能问题。