css - 减少复选框/单选按钮组的重复 CSS 代码

Question

我有以下 CSS 样式复选框和单选按钮组，我想通过组合为 .blg-buttons input[type=radio] 和 设置的样式来缩短它.blg 按钮输入 [type=checkbox]。目前我分别为这些写出样式(即使两者的样式相同)并且不确定将它们组合的最佳方式。

通过在 CSS 中使用嵌套 span、span:hovers 和 :not(:checked)，代码变得更长一些。

/* App-Wide Radio Button Group */
/* Padding on the Span - Margin on the Label */
/* ========================================= */
.blg-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    flex-direction: row;
    flex: 1;
}

.blg-buttons input[type=radio] {
    visibility:hidden;
    width:0px;
    height:0px;
    overflow:hidden;
}

.blg-buttons label {
    display: flex;
    line-height: 0;
    font-size: 0.85vw;
    flex: 1;
    align-items: center;
    margin: 0.2vw;
    font-weight: 700;
 }

.blg-buttons input[type=radio]+span {
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
    vertical-align: top;
    line-height: 1;
    font-size: 1vw;
    padding: .5vw;
    border-radius: .35vw;
    border: .15vw solid #333;
    /*width: 90%;*/
    /* text-align: center; <-- you don't need this with flex */
    color: #333;
    background: #eee;
    text-align: center;
}

/* button colors */
.blg-buttons input[type=radio]:not(:checked) + span {
    cursor: pointer;
    background-color: #EEE;
    color: #333;
}

/* button colors */
.blg-buttons input[type=radio]:not(:checked) + span:hover{
    cursor: pointer;
    background: #888;
}

/* button colors */
.blg-buttons input[type=radio]:checked + span{
    cursor: pointer;
    background-color: #333;
    color: #EEE;
}


.blg-buttons input[type=checkbox] {
    visibility:hidden;
    width:0px;
    height:0px;
    overflow:hidden;
}

.blg-buttons input[type=checkbox]+span {
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
    vertical-align: top;
    line-height: 1;
    font-size: 1vw;
    padding: .5vw;
    border-radius: .35vw;
    border: .15vw solid #333;
    /*width: 90%;*/
    /* text-align: center; <-- you don't need this with flex */
    color: #333;
    background: #eee;
    text-align: center;
}

/* button colors */
.blg-buttons input[type=checkbox]:not(:checked) + span {
    cursor: pointer;
    background-color: #EEE;
    color: #333;
}

/* button colors */
.blg-buttons input[type=checkbox]:not(:checked) + span:hover{
    cursor: pointer;
    background: #888;
}

/* button colors */
.blg-buttons input[type=checkbox]:checked + span{
    cursor: pointer;
    background-color: #333;
    color: #EEE;
}
/* =========== */ 

即我可以将 .blg-buttons input[type=radio]:checked + span 和 .blg-buttons input[type=checkbox]:checked + span 组合成一组是 .blg-buttons input[type=checkbox & radio]:checked + span，还是类似这样的东西？

我也可以嵌套这样的东西吗？:

.blg-buttons {
    label { }
    ... 
}

非常感谢任何有关如何缩短此 CSS 的帮助，谢谢!

Answer 1

你可以做以下事情

CSS

input[type=radio], input[type=checkbox] 
    { 
       //here should be your css
 }

SCSS/LESS

.blg-buttons {
  input[type=radio] {}
  input[type=checkbox] {}

}