<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.a{ width:600px;
height:600px;
background-color:rgba(0,51,153,.3);
position:relative;
margin:0 auto;
}
.a input{ display:none;}
.a label{ display:block;
width:100px;
height:20px;
background:#0F0;
float:left;
margin-left:16px;
}
.one1,.one2,.one3,.one4,.one5{
width:500px;
height:550px;
position:absolute; left:20px; top:25px;
opacity:0;
}
.one1{ background:#000;}
.one2{ background:#F00;}
.one3{ background:#FF0;}
.one4{ background:#00F;}
.a input.in1:checked ~ one .one1,
.a input.in2:checked ~ one .one2,
.a input.in3:checked ~ one .one3,
.a input.in4:checked ~ one .one4{ opacity:1; transition:all 0.2s linear 0.1s; }
</style>
</head>
<body>
<div class="a">
<input type="radio" name="in1" class="in1" id="in1"/>
<label for="in1">abc</label>
<input type="radio" name="in1" class="in2" id="in2"/>
<label for="in2">abc</label>
<input type="radio" name="in1" class="in3" id="in3"/>
<label for="in3">abc</label>
<input type="radio" name="in1" class="in4" id="in4"/>
<label for="in4">abc</label>
<input type="radio" name="in1" class="in5" id="in5"/>
<label for="in5">abc</label>
<div class="one">
<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
<div class="one4"></div>
</div>
</div>
</body>
</html>版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
类样式前面必须加点
原来的代码：
.a input.in1:checked ~ one .one1,
.a input.in2:checked ~ one .one2,
.a input.in3:checked ~ one .one3,
.a input.in4:checked ~ one .one4{ opacity:1; transition:all 0.2s linear 0.1s; }
解答：你写的one前面少了一个.，因为那个是类名