Question

您好，由于某种原因，我无法使:active a {属性适用于我的导航栏。我尝试查找修复程序，但似乎没有任何工作。

我的HTML：

<nav id="nav">
        <ul>
            <li id='active'><a href="index.html">HOME</a></li>
            <li><a href="services.html">SERVICES</a></li>
            <li><a href="request_fix.html">REQUEST FIX</a></li>
            <li><a href="find_us.html">FIND US</a></li>
            <li><a href="contact_us.html">CONTACT US</a></li>
        </ul>
</nav>

我的CSS：

#nav li:active a {
text-shadow: 0 0 1px #808080;
}

Answer 1

你在这里混淆了ID，类和州。试试这个：

#nav li.active a {
    text-shadow: 0 0 5px #808080;
}

<nav id="nav">
        <ul>
            <li class='active'><a href="index.html">HOME</a></li>
            <li><a href="services.html">SERVICES</a></li>
            <li><a href="request_fix.html">REQUEST FIX</a></li>
            <li><a href="find_us.html">FIND US</a></li>
            <li><a href="contact_us.html">CONTACT US</a></li>
        </ul>
</nav>

Answer 2

您正在设置类.active，但您的选择器使用伪类:active。

试试这个：

#nav li.active a {
text-shadow: 0 0 1px #808080;
}

在此处详细了解:active：https://developer.mozilla.org/en/docs/Web/CSS/:active

导航栏.active不工作

2 个答案: