CSS伪选择器和组合器

Question

label:before > input:not(:checked) {
   content: '';
   position: absolute;
   left: 0;
   top: 3px;
   width: 45px;
   height: 22px;
   border-radius: 23px;
   border-color: #3089cb;
}

为什么那行不通？

Answer 1

您需要交换这些元素选择器才能使其工作，并删除直接子选择器 > 并使用即兄弟选择器 +

input:not(:checked) + label:before {
   content: '';
   position: absolute;
   left: 0;
   top: 3px;
   width: 45px;
   height: 22px;
   border-radius: 23px;
   border-color: #3089cb;
}

这里有一个标记示例

label {
   position: relative;
}
input:not(:checked) + label:before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 45px;
   height: 22px;
   border-radius: 23px;
   background: #3089cb;
}

<input type="checkbox">
<label></label>