有沒有辦法選擇一個不是小孩的元素？

Question

有沒有方法可以選擇一個不是孩子的元素？我不確定如何說出或解釋它。希望這些代碼會爲自己說話：

小提琴：http://jsfiddle.net/kBhgV/3/

HTML：

<div title="section-1"> 
    <div> 
     <input type="checkbox" id="item-1"> 
      <label for="item-1">Item 1</label> 
     </input> 
    </div> 
</div> 
<div title="section-2"> 
    <div>Test Drop</div> 
</div> 

CSS：

[title=section-2] { 
    display: none; 
} 
input:checked ~ [title=section-2] { 
    display: block; 
} 

有沒有一種方法，當你選中該複選框，它會展示第二部分而不讓第二部分成爲第一部分的孩子？

Answer 1

從

<div title="section-1"> 
    <div> 
     <input type="checkbox" id="item-1"> 
      <label for="item-1">Item 1</label> 
     </input> 
    </div> 
</div> 
<div title="section-2"> 
    <div>Test Drop</div> 
</div> 

改變你的代碼，以

<input type="checkbox" id="item-1"/> 
    <div title="section-1"> 
    <div> 
     <label for="item-1">Item 1</label> 
    </div> 
</div> 
<div title="section-2"> 
    <div>Test Drop</div> 
</div> 

那麼你的CSS應該正常工作。您可以將複選框的可見性設置爲隱藏，並將其絕對定位在頁面外的某個位置。

我的網站使用了一種類似的導航技術，因此您可以通過檢查代碼來了解它是如何工作的。

http://www.aktof.ca/

改變你的提琴

http://jsfiddle.net/kBhgV/4/