Question

我正在使用自定义单选按钮和复选框，css很大，所以我想将它转换为更少的组织方式，但我怎样才能将此语句转换为更少

 input[type='checkbox']:checked + .mycheck-overlay:before{
       /*some css*/
 }

任何帮助都会很棒......

Answer 1

这取决于你想要如何构建你的LESS，如果你不需要为中间部分设置任何样式，则以下内容仍然有效。

input[type='checkbox']:checked + .mycheck-overlay:before{
     /*some css*/
}

但是，根据您希望样式的规则的具体部分，完全可以将其分解：

input[type='checkbox']{
    /* normal checkbox styles */
    &:checked{
       /* checked state checkbox styles */
       + .mycheck-overlay{
          /* style of elements with class mycheck-overlay immediately after a checked input checkbox */
          &:before{
             /* the before psuedo styling for those... */
          }
       }
    }
}

请注意，您可以使用嵌套规则前面的＆符号&来表示应该应用in conjunction with the parent selector（即编译规则时，它与前一个选择器之间不应留有空格）

减少'+'css选择器的代码

1 个答案: