使用CSS3 中的checked没有实现效果，求解大神，代码如下谢谢！！！

<!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>

阅读 4.3k

使用CSS3 中的checked没有实现效果，求解大神，代码如下谢谢！！！

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？

tailwind css group hover的触发问题?