html - CSS选择孩子

Question

我的问题是关于选择 CSS 第一个或第二个图像。

<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设置第一张图片的属性。

所以问题是，在这种情况下我该如何选择第二张图片？因为我想通过单击使一个图像消失，另一个图像而不是第一个出现。

Answer 1

foo + img + img将是 foo 之后的图像之后的图像。

Answer 2

更通用的方法可能是使用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
}