html - 无法使用 css 设置 "active"链接的样式

Question

我想设置“事件”链接 .login 的样式，但它不起作用。问题出在哪里？

.active {
  color: rgb(0, 148, 199);
}

<div id="nav">
  <span id="logo"></span>
  <span id="navTop">
        <ul>
            <li><a href="#">.welcome</a></li>
            <li><a href="#">.register</a></li>
            <li><a class="active" href="#">.login</a></li>
            <li><a href="#">.contact</a></li>
        </ul>
    </span>
  <span id="navBottom">
        <ul>
            <li><a href="#">.overview</a></li>
            <li><a href="#">.feature</a></li>
            <li><a href="#">.videos</a></li>
        </ul>
	</span>
</div>

Answer 1

这段代码似乎工作正常。我建议你有一些其他的 css 规则来覆盖它。

您可以通过向 css 规则添加 !important 来测试它，看看它是否解决了问题。然后您需要追踪覆盖它的样式。

例如

.active {
    color: rgb(0, 148, 199)!important;
}

.active {
    color: rgb(0, 148, 199);
}

<div id="nav">
<span id="logo"></span>
<span id="navTop">
    <ul>
        <li><a href="#">.welcome</a></li>
        <li><a href="#">.register</a></li>
        <li><a class="active" href="#">.login</a></li>
        <li><a href="#">.contact</a></li>
    </ul>
</span>
<span id="navBottom">
    <ul>
        <li><a href="#">.overview</a></li>
        <li><a href="#">.feature</a></li>
        <li><a href="#">.videos</a></li>
    </ul>
</span>
</div>