复选框只影响一个元素？答案

【问题标题】：Checkbox only affects one element?复选框只影响一个元素？
【发布时间】：2014-05-24 09:33:26
【问题描述】：

我试图在切换复选框时让这张卡片翻转，但到目前为止我只能让正面这样做。我认为复选框输入只影响它之后的元素？我该如何解决这个问题？

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;
}

【问题讨论】：

标签： html css checkbox input css-transitions

【解决方案1】：

你可以使用：

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

目前您使用的是+，它只针对下一个直接兄弟。此选择器将跳过下一个直接兄弟（恰好是 figure.front）并以 figure.back 为目标。

jsFiddle here.

【讨论】：

或者，可以使用input[type=checkbox]:checked ~ .back。在有很多兄弟姐妹的情况下工作。

【解决方案2】：

您的选择器略有错误，因为.back 没有紧跟在复选框之后

input[type=checkbox]:checked ~ .back

会起作用

JSFiddle Demo

【讨论】：