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 click。我的问题是兄弟选择器不起作用。

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

Answer 1

你正在尝试做一些兄弟选择器做不到的事情。您将无法设置 #link1-content 的样式，因为它与 #link1:checked 不共享同一个父级。正如@sirko 所说，这是应该使用 Javascript/JQuery 完成的事情(请参阅下面的代码片段)。

来源 Child and Sibling selectors -- CSS Tricks

Note that in both the general sibling and adjacent sibling selectors the logic takes place within the same parent element.

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

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

Codepen example