我有css样式:

`  .header-menu {
        visibility: hidden;
        position: absolute;
        z-index:3;
        display: block;
        margin:auto;
        top: 0;
        left: -90px;
        width: 100%;
        background-color: #6f19b0;
        height: 100%;
        padding: 0px;
      }
    .header-user {
        visibility: hidden;
        position: absolute;
        z-index: 6;
        left: -250px;
        top: 20px;
      }`

在:选中后，必须看起来像:

`
  #menu__toggle:checked ~ .header-menu  {
    visibility: visible;
    left: 0;
  }
  #menu__toggle:checked ~ .header-user {
    visibility: visible;
    left: 0;
    color:#ffffff 
  }
`

但它只工作。头菜单我没有更多的风格为这个类为什么它不工作？ 这是我的Html:

`
<input id="menu__toggle" type="checkbox" />
  <label class="menu__btn" for="menu__toggle">
    <span></span>
  </label>
  <ol className="header-menu">
       <li><Link to="/">Main</Link></li>
       <li><Link to="/playlists">Playlists</Link></li>
       <li><Link to="/uploadfile">Upload</Link></li>
   </ol>
<div className="header-user">

    <p>username</p>
    <i class="fa fa-sign-out logout"/>
  </div>
`

null

.header-menu {
  visibility: hidden;
  position: absolute;
  z-index: 3;
  display: block;
  margin: auto;
  top: 0;
  left: -90px;
  width: 100%;
  background-color: #6f19b0;
  height: 100%;
  padding: 0px;
}

.header-user {
  visibility: hidden;
  position: absolute;
  z-index: 6;
  left: -250px;
  top: 20px;
}

#menu__toggle:checked~.header-menu {
  visibility: visible;
  left: 0;
}

#menu__toggle:checked~.header-user {
  visibility: visible;
  left: 0;
  color: #ffffff
}

<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
        <span></span>
      </label>
<ol class="header-menu">
  <li>
    <Link to="/">Main</Link>
  </li>
  <li>
    <Link to="/playlists">Playlists</Link>
  </li>
  <li>
    <Link to="/uploadfile">Upload</Link>
  </li>
</ol>
<div class="header-user">

  <p>username</p>
  <i class="fa fa-sign-out logout" />
</div>

null