具有伪类之后或之前的多个CSS属性选择器

Question

我正在尝试创建自定义复选框，它有两种变体：一种用于多个复选框，另一种用于单个复选框（打开/关闭）。 在CSS中，当我尝试仅选择具有适当类的元素（第二种情况）时，什么也没发生。 可以肯定的是，我在下面的CSS语句中犯了错误，但是那是什么？ 谢谢！

input[type="checkbox"][class="toggle"]:not(:checked) + label:before,
input[type="checkbox"][class="toggle"]:checked + label:before {
    background: red;
}

 /*CHECKBOX STYLING*/ /*font styling*/ /* Base for label styling */ input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked { position: absolute; left: -9999px; } input[type="checkbox"]:not(:checked) + label, input[type="checkbox"]:checked + label { position: relative; padding-left: 42px; cursor: pointer; font-size: 16pt; } /* checkbox aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { content: ''; position: absolute; left:0; top: 0px; width: 22px; height: 22px; border: 2px solid #d7d6d5; border-radius: 4px; background: #f1f5f8; } [type="checkbox"]:checked + label:before{ border-color: #555555; } input[type="checkbox"][class="toggle"]:not(:checked) + label:before, input[type="checkbox"][class="toggle"]:checked + label:before { background: red; } /*checked mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: '\\e909'; font-family: 'icomoon'; position: absolute; top: 8px; left: 4px; font-size: 10pt; line-height: 0.8; color: #555555; } /* checked mark aspect changes */ [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } 

  <div class="checkbox"> <form action="#"> <p> <input id="check1" type="checkbox" name="check" checked="checked" > <label for="check1">Checked value</label> </p> <p> <input id="check2" type="checkbox" name="check""> <label for="check2">Unchecked value</label> </p> <p> <input id="check3" type="checkbox"> <label for="check3" class="toggle">Only two values</label> </p> </form> </div> 

Answer 1

该类存在于<label>而不是<input> ，因此您应该在该类选择器中添加<label> 。

input[type="checkbox"]:not(:checked) + label.toggle:before,
input[type="checkbox"]:checked + label.toggle:before {
  background: red;
}

最好使用. 运算符以匹配具有特定类的元素，因为属性选择器[class="toggle"]仅匹配严格具有toggle类的元素

 /*CHECKBOX STYLING*/ /*font styling*/ /* Base for label styling */ input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked { position: absolute; left: -9999px; } input[type="checkbox"]:not(:checked) + label, input[type="checkbox"]:checked + label { position: relative; padding-left: 42px; cursor: pointer; font-size: 16pt; } /* checkbox aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: 0px; width: 22px; height: 22px; border: 2px solid #d7d6d5; border-radius: 4px; background: #f1f5f8; } [type="checkbox"]:checked + label:before { border-color: #555555; } input[type="checkbox"]:not(:checked) + label.toggle:before, input[type="checkbox"]:checked + label.toggle:before { background: red; } /*checked mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: '\\e909'; font-family: 'icomoon'; position: absolute; top: 8px; left: 4px; font-size: 10pt; line-height: 0.8; color: #555555; } /* checked mark aspect changes */ [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } 

 <div class="checkbox"> <form action="#"> <p> <input id="check1" type="checkbox" name="check" checked="checked"> <label for="check1">Checked value</label> </p> <p> <input id="check2" type="checkbox" name="check"> <label for="check2 ">Unchecked value</label> </p> <p> <input id="check3 " type="checkbox"> <label for="check3 " class="toggle ">Only two values</label> </p> </form> </div>