CSS'：已检查'无效

Question

HTML

...
<input id ="nav-toggle" type="checkbox">
<label id ="nav-toggle-label" for="nav-toggle">
    <img src="ic_view_list_white_18px.svg">
</label>
...

CSS

...    
header #nav-toggle {
    display: none;
}
header #nav-toggle-label {
    position: absolute;
    top: 1.3ch;
    cursor: pointer;
}
#nav-toggle:checked + header + article {
    margin-left: 20ch;
}
...

尝试创建一个复选框，通过向右滑动nav和header来切换侧边栏（article）。 由于某些原因，它不起作用，不胜感激任何帮助。

Answer 1

+是相邻兄弟选择器
您的相邻兄弟不是<header>而是<label> 如果您的<article>是后来的兄弟元素，请使用~ 常规同级组合选择器...

或者这样做：

#nav-toggle { /* remove "header" */
    display: none;
}
#nav-toggle-label { /* remove "header" */
    position: absolute;
    top: 1.3ch;
    cursor: pointer;
}
#nav-toggle:checked + article { /* remove the "+header" */
    margin-left: 20ch;
}

<header>
  
  <!-- LABEL IS INSIDE <header>... -->
  
  <label id ="nav-toggle-label" for="nav-toggle">
    <img src="//placehold.it/50x50">
  </label>
  
</header>

<!-- BUT PLACE YOUR CHECKBOX RIGHT BEFORE THE DESIRED TOGGLABLE ELEMENT -->

<input id="nav-toggle" type="checkbox">
<article>THIS IS ARTICLE</article>

现在上述作品导致+选择立即关闭下一个兄弟的复选框：article

Answer 2

你在yur css的导航切换之前忘记了＃。