:checked选择器无法选中我的这个class，看代码

Question

• 
  
  


• 
  
  


• 
  
  


• 
  
  


• 
  
  

.clr{
width: 0;
height: 0;
overflow: hidden;
clear: both;
padding: 0;
margin: 0;
}

.slide-body{
width: 1280px;
height: 720px;
position: absolute;
left: 50%;
top: 10%;
background-color: #000000;
margin-left: -640px ;
overflow: hidden;
}

.slide-btn{
width: 100%;
}
.slide-btn > input,
.slide-btn > a{
width: 20%;
height: 44px;
line-height: 34px;
position: absolute;
bottom: 0;
text-align: center;
}

.slide-btn > input{
opacity: 0;
z-index: 1000;
}

.slide-btn > a{
background-color: #666;
border-left: 1px solid #C0C0C0;
text-align: center;
font-size: 18px;
z-index: 10;
}

#slide-btn-1, #slide-btn-1 + a{
position: absolute;
left: 0%;
}

#slide-btn-2, #slide-btn-2+a{
position: absolute;
left: 20%;
}

#slide-btn-3, #slide-btn-3+a{
position: absolute;
left: 40%;
}

#slide-btn-4, #slide-btn-4+a{
position: absolute;
left: 60%;
}

#slide-btn-5, #slide-btn-5+a{
position: absolute;
left: 80%;
}

.slide-btn input:checked + a,
.slide-btn input:checked:hover + a
{
background-color: #888;
}

.slide-btn input:hover + a{
background-color: #545454;
}

.slide-img ul,.slide-img li{
list-style: none;
padding: 0;
margin: 0;
}

.slide-img ul{
width: 6400px;
height: 720px;
overflow: hidden;
}

.slide-img li{
width: 1280px;
float: left;
}

.slide-img,.slide-img-li{
position: relative;
width: 100%;
height: 100%;
}

.slide-img{
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out ;
-ms-transition:all 0.6s ease-in-out ;
-o-transition:all 0.6s ease-in-out ;
transition:all 0.6s ease-in-out ;
}

#slide-btn-1:checked ~ .slide-img{
-webkit-transform: translateX(0%);
-o-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}

#slide-btn-2:checked ~ .slide-img{

-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);

}

#slide-btn-3:checked ~ .slide-img{
-webkit-transform: translateX(-200%);
-o-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}

#slide-btn-4:checked ~ .slide-img{
-webkit-transform: translateX(-300%);
-o-transform: translateX(-300%);
-moz-transform: translateX(-300%);
-ms-transform: translateX(-300%);
transform: translateX(-300%);
}

#slide-btn-5:checked ~ .slide-img{
-webkit-transform: translateX(-400%);
-o-transform: translateX(-400%);
-moz-transform: translateX(-400%);
-ms-transform: translateX(-400%);
transform: translateX(-400%);
}

Answer 1

看不到完整的代码。建议你用firebug调试