html - 组合多个 css 选择器失败

Question

我有一个详细的 css 单选按钮，我想在同一页面上使用 45 次。css 有点强大，因此重新创建条目 45 次毫无意义。但是，当我尝试组合多个 id 标签时，我遇到了很多错误(显示不正确)

HTML:

<div class="pcontainer">
        <section class="pmain">
                <div class="rblock">
                        <div class="squared1">
                                <input type="checkbox" value="None" id="squaredOne" name="check" />
                                <label for="squared1"></label>
                        </div>
                </div>
        </section>
        <nav class="pright">
                <div class="rblock">
                        <div class="squared2">
                                <input type="checkbox" value="None1" id="squaredOne" name="check" />
                                <label for="squared2"></label>
                        </div>
                </div>
        </nav>
....squared36
</div>

CSS:

.squared1, squared2 {
        width: 28px;
        height: 28px;
        background: #fcfff4;

        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
        margin: 20px auto;
        -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        position: relative;
}

.squared1, squared2 label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 4px;
        top: 4px;

        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.squared1, squared2 label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background: #00bf00;

        background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
        background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
        background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
        background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
        background: linear-gradient(top, #00bf00 0%, #009400 100%);

        top: 2px;
        left: 2px;

        -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.squared1, squared2 label:hover::after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: alpha(opacity=30);
        opacity: 0.3;
}

.squared1, squared2 input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
}

如何组合多个 CSS 选择器？CSS 中有动态方法吗？

Answer 1

你写错了 css 选择器:

使用，例如:

.squared1 标签，squared2 标签

代替

.squared1, squared2 标签

逗号允许你写多个选择器，但必须全部完整