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>

Я пытаюсь найти способ показать весь скрытый текст идентификатора контента, но кажется, что когда он находится под этой таблицей, он не будет отображаться. Есть идеи / предложения? Вот 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 метод. Вы полагаетесь на смежных и общих братских комбинаторов, +, ~, В этом случае, если элемент не является общим предшествующим братом, он не будет работать. CSS это каскад; вам придется использовать JS, если вы хотите иметь возможность проходить через DOM или выбирать элементы, которые не являются братьями и сестрами.

Ты сделаешь; Тем не менее, есть один вариант, который заключается в размещении label элементы в корне документа, как вы сделали, а затем выберите дочерние элементы элемента. Например:

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

ПРИМЕР ЗДЕСЬ

Стоит отметить, что id ДОЛЖЕН быть уникальным. В вашем примере есть дубликаты id "S.