首先看下解释：
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框） ，只对input type=radio和checkbox 有用
label 可以和 input关联 用#id 来控制，这样点击label的文字相当于 点击input的内容 。
<label for="male">Male</label> <input type="radio" name="sex" id="male" />
接下来 点击label相当于点击 input
#btn2:checked ~ .p2{
display:block;
}
在btn2这个选中状态的时候 我给它后面的.p2 添加样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .p1,.p2,.p3,.p4{width: 200px;height: 200px;position: absolute;display: none;} #btn1:checked ~ .p1{ display:block; } #btn2:checked ~ .p2{ display:block; } #btn3:checked ~ .p3{ display:block; } #btn4:checked ~ .p4{ display:block; } .con{position: relative;} input{display: none;} </style> </head> <body> <div class="con"> <input type="radio" id="btn1" name="aa" checked> <label for="btn1">aaaaa</label><br> <input type="radio" id="btn2" name="aa"> <label for="btn2">bbbbb</label><br> <input type="radio" id="btn3" name="aa"> <label for="btn3">ccccc</label><br> <input type="radio" id="btn4" name="aa"> <label for="btn4">ddddd</label><br> <img class="p1" src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt=""> <img class="p2" src="https://zzk.cnblogs.com/images/logo.gif" alt=""> <img class="p3" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2572932050,2180630595&fm=58" alt=""> <img class="p4" src="http://img0.imgtn.bdimg.com/it/u=2461784753,731009515&fm=200&gp=0.jpg" alt=""> </div>