html - 带有伪类之后或之前的多个 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>