css for dynamic复选框为动态id

Question

我的复选框有问题。我在while循环中生成了值并使用动态id显示并使用css设计。我遇到了css问题。 我检查chrome.still中的css有问题我每行有3个按钮。对于样本我创建了两行在第一行'打开'被选中，在第二行'关闭'被选中。在页面加载我要显示'关闭'复选框，选中red.now open正在页面加载

.ck-button0 {
    margin:0px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

.ck-button0 #label0 {
    float:left;
    width:4.0em;
}
.ck-button0 #label0 #span0 {
    text-align:center;
    padding:3px 0px;
    display:block; 
    
    border-radius:4px;
}

.ck-button0 #label0 input {
    position:absolute;
    top:-20px;
}
input#o10:checked + #span0 {
  background-color: green;
  color: #fff;
}


.ck-button0 #label0:hover #o10 + #span0 {
    background-color:green;
}
.ck-button0 #label0:hover #o20 + #span0 {
    background-color:red;
}
.ck-button0 #label0:hover #o30 + #span0 {
    background-color:orange;
}
  
.ck-button1 {
    margin:0px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

.ck-button1 #label1 {
    float:left;
    width:4.0em;
}
.ck-button1 #label1 #span1 {
    text-align:center;
    padding:3px 0px;
    display:block; 
    
    border-radius:4px;
}

.ck-button1 #label1 input {
    position:absolute;
    top:-20px;
}

input#o21:checked + #span1 {
  background-color: red;
  color: #fff;
}



.ck-button1 #label1:hover #o11 + #span1 {
    background-color:green;
}
.ck-button1 #label1:hover #o21 + #span1 {
    background-color:red;
}
.ck-button1 #label1:hover #o31 + #span1 {
    background-color:orange;
}

  Open<a href="broadcast_detail.php?req_id=1" class="astext">database developer</a>
  
  


  <div class="ck-button0"><label id="label0"><input type="radio" name="sta_choice0" id="o10" onclick="demo('Open',1);" value="Open" checked=""><span id="span0">Open</span></label></div><div class="ck-button0"><label id="label0"><input type="radio" name="sta_choice0" id="o20" value="Close" onclick="demo('Close',1);"><span id="span0">Close</span></label></div><div class="ck-button0"><label id="label0"><input type="radio" name="sta_choice0" id="o30" value="Hold" onclick="demo('Hold',1);"><span id="span0">Hold</span></label></div><br><br>Close<a href="broadcast_detail.php?req_id=2" class="astext">sourcer</a>
 

  <div class="ck-button1"><label id="label1"><input type="radio" name="sta_choice1" id="o11" onclick="demo('Open',2);" value="Open"><span id="span1">Open</span></label></div><div class="ck-button1"><label id="label1"><input type="radio" name="sta_choice1" id="o21" value="Close" onclick="demo('Close',2);"><span id="span1" checked="">Close</span></label></div><div class="ck-button1"><label id="label1"><input type="radio" name="sta_choice1" id="o31" value="Hold" onclick="demo('Hold',2);"><span id="span1">Hold</span></label></div><br><br>
  

Answer 1

如果你从跟随css ".ck-button1 #label1:hover #o21 + #span1"移除悬停，那么我认为你会找到你的结果

＆＃13;

＆＃13;

.ck-button0 {
    margin:0px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

.ck-button0 #label0 {
    float:left;
    width:4.0em;
}
.ck-button0 #label0 #span0 {
    text-align:center;
    padding:3px 0px;
    display:block; 
    
    border-radius:4px;
}

.ck-button0 #label0 input {
    position:absolute;
    top:-20px;
}
input#o10:checked + #span0 {
  background-color: green;
  color: #fff;
}


.ck-button0 #label0:hover #o10 + #span0 {
    background-color:green;
}
.ck-button0 #label0:hover #o20 + #span0 {
    background-color:red;
}
.ck-button0 #label0:hover #o30 + #span0 {
    background-color:orange;
}
  
.ck-button1 {
    margin:0px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

.ck-button1 #label1 {
    float:left;
    width:4.0em;
}
.ck-button1 #label1 #span1 {
    text-align:center;
    padding:3px 0px;
    display:block; 
    
    border-radius:4px;
}

.ck-button1 #label1 input {
    position:absolute;
    top:-20px;
}

input#o21:checked + #span1 {
  background-color: red;
  color: #fff;
}



.ck-button1 #label1:hover #o11 + #span1 {
    background-color:green;
}
.ck-button1 #label1 #o21 + #span1 {
    background-color:red;
}
.ck-button1 #label1:hover #o31 + #span1 {
    background-color:orange;
}

＆＃13;

Open<a href="broadcast_detail.php?req_id=1" class="astext">database developer</a>
  
  


  <div class="ck-button0"><label id="label0"><input type="radio" name="sta_choice0" id="o10" onclick="demo('Open',1);" value="Open" checked=""><span id="span0">Open</span></label></div><div class="ck-button0"><label id="label0"><input type="radio" name="sta_choice0" id="o20" value="Close" onclick="demo('Close',1);"><span id="span0">Close</span></label></div><div class="ck-button0"><label id="label0"><input type="radio" name="sta_choice0" id="o30" value="Hold" onclick="demo('Hold',1);"><span id="span0">Hold</span></label></div><br><br>Close<a href="broadcast_detail.php?req_id=2" class="astext">sourcer</a>
 

  <div class="ck-button1"><label id="label1"><input type="radio" name="sta_choice1" id="o11" onclick="demo('Open',2);" value="Open"><span id="span1">Open</span></label></div><div class="ck-button1"><label id="label1"><input type="radio" name="sta_choice1" id="o21" value="Close" onclick="demo('Close',2);"><span id="span1" checked="">Close</span></label></div><div class="ck-button1"><label id="label1"><input type="radio" name="sta_choice1" id="o31" value="Hold" onclick="demo('Hold',2);"><span id="span1">Hold</span></label></div><br><br>
  

＆＃13;

＆＃13;

＆＃13;