CSS同级选择器

Question

这是html代码：

<div class="wrapper">
  <div class="menu-wrap">
    <ul>
     <li>
       <input type="radio" id="link1" />
     </li>
    </ul>
  </div>

  <div class="content-wrap">
    <div id="link1-content"><p>Just a paragraph</p></div>
  </div>
</div>

这是CSS代码：

#link1:checked ~ #link1-content { display: none;}

我正在尝试使用input [type = radio]创建CSS单击。 我的问题是兄弟选择器不起作用。

如何编写合适的兄弟选择器？

Answer 1

您正在尝试执行兄弟选择器无法执行的操作。 您将无法设置#link1-content样式，因为它与#link1:checked不共享同一父对象。 正如@sirko所说，这应该使用Javascript / JQuery来完成（请参见下面的代码段）。

源 子级和同级选择器-CSS技巧

注意，在通用同级选择器和相邻同级选择器中，逻辑都发生在同一父元素内。

一个非常简单的jQuery解决方案：

$('#link1').change(function(){
  $('#link1-content').toggle();
});

Codepen示例