我尝试使用两个同级选择器(如代码段中的~
和+
)使nav
栏在选中该框时出现,但是它不起作用,也不知道还有什么要做。
nav {
left: -100%;
position: fixed;
}
#check:checked~nav {
left: 0;
}
<input type="checkbox" id="check"><label for="check"><i class="fas fa-bars"></i></label></div>
<nav>
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>
这里是代码的外观,首先是没有关闭的<div>
标签对于+
兄弟姐妹,选择移动复选框的标签。
nav{
left: -100%;
position: fixed;
}
#check:checked + nav{
left: 0px;
}
<label for="check"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="check">
<nav>
<ul><li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>
并且如果您希望标签具有相同的顺序,请将CSS
选择器更改为此:
nav{
left: -100%;
position: fixed;
}
#check:checked + label + nav{
left: 0px;
}
<input type="checkbox" id="check">
<label for="check"><i class="fas fa-bars"></i></label>
<nav>
<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>
</nav>