复选框和兄弟选择器

时间:2018-06-05 07:19:05

标签: html css twitter-bootstrap bootstrap-4

我使用标签作为复选框的掩码,我需要在选中相应的复选框时更改标签的背景。这是我到目前为止所做的:



.viewbutton {
  height: 48px;
  width: 48px;
  background-color: #FFFFFF;
  border-radius: 50%;
  margin: 0px 4px;
  border: 0px;
  border: 1px solid #CDCDCD;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  position: relative;
  display: inline-block;
}

#comparechk:checked+#comparebtn,
#editchk:checked+#editbtn,
#multiplechk:checked+#multiplebtn {
  background-color: #005EFF;
  outline: none;
}

<input type="checkbox" id="comparechk" class="chkhidden">
<input type="checkbox" id="editchk" class="chkhidden">
<input type="checkbox" id="multiplechk" class="chkhidden">

<label for="comparechk" id="comparebtn" class="viewbutton"></label>
<label for="editchk" id="editbtn" class="viewbutton"></label>
<label for="multiplechk" id="multiplebtn" class="viewbutton"></label>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

+相邻的兄弟组合子,因此A + B表示直接跟随B的{​​{1}}元素,中间没有其他元素。

你想要一般兄弟组合,A

~

http://jsfiddle.net/8u031bom/3/