html - 用于动态 id 的选中复选框的 css

Question

我在选中复选框时遇到问题。我在 while 循环中生成值并使用动态 ID 显示并使用 css 设计。我在 css 方面遇到问题。我检查 chrome 中的 css。仍然有问题我在每行中有 3 个按钮。对于示例我创建了两行在第一行中选中“打开”并在第二行中选中“关闭”。在页面加载时我想显示'关闭'复选框被选中为红色。现在打开正在加载页面

.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" 中删除悬停，那么我认为您会找到结果

.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;
}

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>