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。

CSS选择器 - 做错了什么

1 个答案: