CSS Psuedo Selector和Combinator

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>