CSS選擇兒童

我的問題是關於在CSS第一或第二圖像中選擇。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集屬性第一圖像。

所以問題是，如何在這種情況下選擇第二張圖像？因爲我想通過一次點擊就可以讓一個圖像消失，另一個圖像會先出現，而不是先出現。

來源

2013-02-22 hya

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

來源

2013-02-22 14:48:57 Achrome

我是想給你一個例子。 :) – Achrome 2013-02-22 14:52:53

這不符合你的想法。 – BoltClock 2013-02-22 14:54:04

它匹配給定類型的第n個元素。我不認爲它強制實施父母與子女的關係。如果是這樣，那麼這是一個不正確的答案。 – Achrome 2013-02-22 14:55:33

foo + img + img將是foo之後的圖像之後的圖像。

來源

2013-02-22 14:44:52 Quentin

CSS選擇兒童

回答

相關問題