Question

我试图让这张卡翻转复选框，但到目前为止，我只能让前脸这样做。我认为复选框输入只影响后面的元素吗？我怎么能绕过这个？

HTML：

<ul>
<li>
    <input type="checkbox">flip</input>
    <figure class="front">
        1
    </figure>
    <figure class="back">
        2
    </figure>
</li>

CSS：

input[type=checkbox] {
   position: relative;
   top: 10px;
   left: 10px;
}

input[type=checkbox]:checked + .front {
    -webkit-transform: rotateY(180deg);
    transform:rotateY(180deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;    
}

input[type=checkbox]:checked + .back {
    -webkit-transform: rotateY(0deg);
    transform:rotateY(0deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
#diamonds {
    -webkit-perspective: 1000px;
    perspective:1000px;
    position:relative;
}
li {
    position:relative;
    margin:auto 0;
    width:33%;
    height:0;
    padding-bottom:33%;
    list-style:none;
    display:inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform:rotateZ(-45deg);
    transform:rotateZ(-45deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
figure {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.front {
    background:red;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
.back {
    background:green;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}

Answer 1

您可以使用：

input[type=checkbox]:checked + figure + .back

目前您正在使用+，它仅针对下一个直接兄弟。此选择器将跳过下一个直接兄弟（恰好是figure.front）并定位figure.back。

<强> jsFiddle here.

Answer 2

您的选择器略有错误，因为.back在复选框

之后没有立即执行

input[type=checkbox]:checked ~ .back

将起作用

JSFiddle Demo

复选框只影响一个元素？

2 个答案: