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

值得注意的是，id必须是唯一的。在您的示例中，有重复的 id's。