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

请注意，在一般兄弟和相邻兄弟选择器中，逻辑发生在同一父元素中。

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

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

Codepen example

CSS兄弟选择器

1 个答案: