CSS選擇器 - 做錯事

Question

我想完成一個隱藏/顯示單選按鈕選項，但我堆棧與CSS。

<input type=radio id="show" name="group"> 
<input type=radio id="hide" name="group" checked> 
    <label id="id1" for="show"><span id="id1">show</span></label> 
    <label id="id2" for="hide"><span id="id2">hide</span></label> 
    <br /><span>sdsahsahasa<br /> 
    asasfasfasfa<br /> 
    sfafsa<br /> 
    fsa<br /> 
    fsafsas</span><br /> 
<span id="content">Content</span> 
    <table> 
     <tr><td><span id="content">Content</span></td></tr> 
    </table> 

我試圖找到一種方式來顯示所有的「內容」 ID隱藏文本，但它似乎是，當它是桌子底下也不會顯示出來。任何想法/建議？這是我目前使用的CSS。

input { 
display:none; 
} 

span#content { 
    display:none; 
} 

input#show:checked ~ span#content{ 
    display:block; 
} 

input#show:checked ~ label#id1{ 
    display:none; 
} 
input#show:checked ~ label#id2{ 
    display:block; 
} 

input#hide:checked ~ label#id2{ 
    display:none; 
} 
input#hide:checked ~ label#id1{ 
    display:block; 
} 
input#hide:checked ~ span#content{ 
    display:none; 
} 

現場演示： http://jsfiddle.net/LZ8Sc/

謝謝！

Answer 1

使用:checked方法時，您的使用相對有限。您依靠的是adjacent和general sibling combinators,+,~。在這種情況下，如果元素不是一般的前一個兄弟，它不會起作用。 CSS是級聯的;如果您想要遍歷DOM或選擇不是兄弟的元素，則必須使用JS。

你這樣做;但是，有一個選項，即將label元素放置在文檔的根目錄，就像您一樣，然後選擇同級元素的子元素。例如：

input#show:checked ~ table tr td span#content, 
input#show:checked ~ span#content { 
    display:block; 
} 

EXAMPLE HERE

值得一提的是一個idMUST是唯一的。在你的例子中，有重複的id's。