Question

我有以下CSS样式的复选框和单选按钮组，我想通过组合为.blg-buttons input[type=radio]和.blg-buttons input[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] {}

}

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

1 个答案: