Css兄弟（〜）選擇器與檢查屬性無效

Question

爲什麼我的css下面不能正常工作？任何人都可以提醒我。

#slide1:checked ~ #inner { margin-left: 0;} 
#slide2:checked ~ #inner { margin-left: -800px;} 
#slide3:checked ~ #inner { margin-left: -1600px;} 

下面的css確實有效。我不知道該從哪裏出發。

#slide1:checked ~ #broadControl label:nth-child(1), 
#slide2:checked ~ #broadControl label:nth-child(2), 
#slide3:checked ~ #broadControl label:nth-child(3){ 
    background: #333; 
    border-color: #333; !important; 
} 

HTML：

<div id="broadcast"> 
    <div id="overflow"> 
     <div id="inner"> 

      <article> 
       <div class="info"></div> 
       <div id="pic1"></div> 
       <!--img src=""--> 
      </article> 
      <article> 
       <div class="info"></div> 
       <div id="pic2"></div> 
       <!--img src=""--> 
      </article> 
      <article> 
       <div class="info"></div> 
       <div id="pic3"></div> 
       <!--img src=""--> 
      </article> 

     </div> 
    </div> 
</div> 

<!-- Broadcast controls --> 
<input checked type="radio" name="slider" id="slide1"> 
<input type="radio" name="slider" id="slide2"> 
<input type="radio" name="slider" id="slide3"> 
<div id="broadControl"> 
    <label for="slide1"></label> 
    <label for="slide2"></label> 
    <label for="slide3"></label> 
</div> 

我試圖與純CSS幻燈片過渡了解更多的CSS。

但我在這裏呆了3天了。

我不知道爲什麼它不起作用。

如果您有任何想法，請將它們推薦給我。

在此先感謝。

Answer 1

#slide1:checked ~ #broadControl label:nth-child(1) 

~運算符只能在元素之後的元素上工作。在這種情況下，#slide1搜索#broadControl標籤元素AFTER #slide1之後，它無法在其之前進行搜索。

例小提琴：
http://jsfiddle.net/9vxYJ/

您將在撥弄我搬到你#broadcast部分的broadcast controls後看到。

另一個問題是~是兄弟選擇器，這意味着它只能找到同一級別上的元素。但是你可以解決這個問題，因爲#broadcast處於同一水平#slide1等，可以埋到#inner，就像這樣：

#slide1:checked ~ #broadcast > #overflow > #inner { margin-left: 0;} 
#slide2:checked ~ #broadcast > #overflow > #inner { margin-left: -800px;} 
#slide3:checked ~ #broadcast > #overflow > #inner { margin-left: -1600px;}