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
}

CSS选择孩子

2 个答案: