CSS '：选中' 不工作

HTMLCSS '：选中' 不工作

... 
<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; 
} 
...

一直在努力创建将通过滑动header和article向右切换一个侧边栏（nav）的复选框。由于某种原因，它不工作，将不胜感激任何帮助。

来源

2016-04-30 galah92

提供重现问题所需的所有部件http://stackoverflow.com/help/mcve –

+是相邻兄弟选择
你相邻的兄弟是不是<header>但<label>。
如果您<article>是后来兄弟元素使用~一般兄弟姐妹Combinator的选择...

或者做这种方式：

#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

来源

2016-04-30 13:38:34

我没有设法像你描述的那样实现它。我有**两个**标签作用，'header'和'nav'。我的复选框（以及标签）现在位于'header'里面。我试着将'input'标签移动到'header'和'nav'之间，但它仍然没有用。我需要一种方法来获得父标签（对于'header'）和'nav'，它是'header'的邻居兄弟。 – galah92

-1

你忘了导航，切换之前＃在尤尔CSS

来源

2016-04-30 13:30:55 Raf

对不起，复制粘贴错误。该代码当然不起作用。 – galah92

为什么是＃nav-toggle显示：无？ – Raf

@Raf，因为它被用作开关器。按道理。 –

CSS '：选中' 不工作

回答

相关问题