时间戳

首页 > 解决方案 > " :checked " 这个属性不工作

html - " :checked " 这个属性不工作

问题描述

我的 HTML 代码如下所示：

<nav>
        <ul class="nav-links">
            <li class="hvr-shutter-out-horizontal"><a href="#">Login</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">About Us</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Donate</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Feedback</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle">

而css文件是

.nav-links {
    text-align: center;
    font-size: 15px;
    width: 100%;
    display: none;  
}

#toggle:checked + .nav-links{
    display: block;
}

但是这里检查的属性不起作用。请帮忙 。

标签： htmlcss

解决方案

+是下一个兄弟组合子。

.nav-links不是输入之后的下一个，而是它nav之前的两个兄弟姐妹的孩子。

没有针对前一个元素的组合器。

切换菜单最好使用 JavaScript 实现，它可以切换元素上的类aria并向 DOM 添加合适的状态。

推荐阅读