最近遇到一个需求——利用伪类和单选框改变div的内容（不能使用JavaScript）。刚刚接到这个需求的时候一脸懵逼，但是还是要做呀！
下面我们来讲一讲实现的步骤，如果想直接看代码请拉到文章最后。
首先我们来谈谈单选框。单选框是表单中的基本类型，我们用<input type="radio">定义单选按钮。其有一个checked属性来指定初始选中项。当我们要创建一个具有多个选项的单选框是，我们需要在每个选项中加上相同的name属性以表示其为同一类型的选项。如下图代码所示。
运行结果如下图所示。
然后我们来谈谈伪类。我理解的伪类是其给了当前元素第二种表现形式，当该元素满足特定条件时执行伪类中的样式。
那么问题来了，伪类不是只能给当前元素添加新样式吗？为什么还能改变其他div呢？下面我们隆重介绍一下兄弟选择器（+选择器、~选择器）。
兄弟元素：具有相同父元素的同级元素。
+选择器（相邻兄弟选择器）：选择紧接在指定元素后的兄弟元素。
~选择器（兄弟选择器）:选择指定元素的后面的所有兄弟元素。
为了更好的使用+选择器和~选择器，我们看一下下图这个例子。
运行结果如下图所示
准备好了以上的只是我们就可以开始我们的工作啦，废话少说，上代码
结果如下
当然，也可以用 ~选择器实现上述的功能，大家可以自己尝试一下~
网友评论