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。