CSS 兄弟选择器答案

【问题标题】：CSS Sibling SelectorCSS 兄弟选择器
【发布时间】：2014-12-03 01:45:58
【问题描述】：

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

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

【问题讨论】：

你应该在这里使用 JavaScript。
我知道如何用 JS 做到这一点，但我只需要 css。
“我的问题是兄弟选择器不起作用”。那是因为这些元素不是同级元素。
好点，css有什么hack吗？
不，直到你可能称之为 CSS4。 JavaScript 是现在唯一的方法。

标签： html css css-selectors

【解决方案1】：

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

来源 Child and Sibling selectors -- CSS Tricks

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

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

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

Codepen example

【讨论】：

谢谢，我知道如何用 jQuery 做到这一点，我想要一个纯 CSS 的 hack。