html - 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();
});

代码笔示例