Question

我想将一个伪css类分配给具有特定<label>

的div中的#id

我的标记：

<div id="square">
  <input class="time" id="show_45min" type="checkbox" name="time" value="45min">
  <label for="show_45min" class="square">45 min</label><br>

  <input class="time" id="show_60min" type="checkbox" name="time" value="60min">
  <label for="show_60min" class="square">60 min</label><br>
</div>

和css：

#square input[type=radio] {  
  display: none;  
}  

#square label:before {  
  content: "";  
  display: inline-block;  
  width: 16px;  
  height: 16px;  
  margin-right: 10px;  
  position: absolute;  
  left: 0;  
  bottom: 1px;  
  background-color: #aaa;  
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}

问题是，页面上的每个label仍然会获得label:before的内容。但我只想将它分配给div中的标签。

由于

Answer 1

http://jsbin.com/luhib/1/edit

input[id^=show_]{
  display:none;
}
label[for^=show_]:before {  
  content: "";  
  display: inline-block;
  vertical-align:baseline;
  width: 1em;  
  height: 1em;  
  margin-right: 10px;
  background-color: #aaa;  
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}
input[id^=show_]:checked + label.square:before {  
 box-shadow: inset 0px 2px 15px 0px rgba(255, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}

Answer 2

您可能想要使用＆gt; 直接子选择器：

#square > label:before

<强> More from MDN

＆gt;组合器分离两个选择器并仅匹配那些选择器第二个选择器匹配的元素是直接子元素第一个匹配的元素。相比之下，当两个选择器是结合后代选择器，组合选择器表达式匹配第二个选择器匹配的元素哪个存在与第一个选择器匹配的祖先元素，无论DOM的“跳数”是多少。

Answer 3

更改此

#square label:before

到

#square > label:before

将伪类分配给特定div中的标签

3 个答案: