html - 子を選択する CSS

Question

私の問題は、CSS で最初または 2 番目の画像を選択することです。

<div class="ao-preview">
                    <input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
                    <img src="img/local.png"/>
                    <img src="img/local_big.jpg"/>
</div>

CSSコード

.ao-item img {
    margin: 0 auto;
    max-width: 100%;
    display: block;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 0.8;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input.ao-toggle:checked  +img{
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
        filter: alpha(opacity=99);
        opacity: 1;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
}

input.ao-toggle:checked +img最初の画像の属性を設定します。

問題は、その場合、どのように 2 番目の画像を選択できるかということです。ワンクリックで画像を消したいので、最初の代わりに別の画像を表示します。

Answer 1

より一般的なアプローチは、nth-of-type疑似クラスの使用です

.ao-toggle:checked + img:nth-of-type(1) {
     //style for the 1st element here
}
.ao-toggle:checked + img:nth-of-type(2) {
     //style for the 2nd element here
}

Answer 2

foo + img + imgfooの後の画像の後の画像になります。