css - 当父母的孩子有条件（选中）时，目标是父母兄弟

Question

当父母的孩子有条件（选中）时，目标是父母兄弟。

我尝试了以下代码，但它不工作，因为它在孩子兄弟姐妹之后：

.content {
  top:      0px;
  width:      75%;
  max-width: 300px;
  background: $white;
  z-index: 10;
  box-shadow: 5px 0 5px 0 rgba(0,0,0,.1);
  padding-top: 20px;
   transition: all 0.2s ease-in-out;
  }


.toggle > input[type='checkbox']:checked ~ .content:first-of-type{
  border: 1px solid red;
}

<div class="toggle">
  <input type="checkbox" id="toggle">
  <i>dsaosame cicon and text</>
</div>

<div class="content">
  <ul>
    <li>aaa</li>
    <li>dsadsads</li>
   </ul>
</div>
<div class="content">
  <ul>
    <li>aaa</li>
    <li>dsadsads</li>
   </ul>
</div>

标签： css