需要帮助设计活动链接答案

【问题标题】：Need help styling active link需要帮助设计活动链接
【发布时间】：2014-03-14 08:01:03
【问题描述】：

如果我在导航栏的无序列表中设置样式字体颜色，如何在特定元素上使用 .class 覆盖它？

例如，这是我的导航：
首页
服务
关于
联系我们

所以我在我的 CSS 中将导航字体颜色设置为 #000。

现在，如果我只想将其中一个元素覆盖为具有类的特定颜色，该怎么办？因为我尝试在其中一个上使用一个类，但它并没有超越它。

【问题讨论】：

发布您的 CSS 和 HTML。
我很难在这里发布我的代码。不过给我一分钟，我会发布的。

标签： html css list navigation

【解决方案1】：

如果每个元素都在自己的 li 下，您可以像这样设置其中一个 li li class="home" Home li and in css put .home {color:#000} 如果我没看错，这应该会有所帮助熟悉这个网站。

【讨论】：

欢迎您！很多人使用 jsfiddle 或 codepen 来说明需要 HTML、CSS 和 JS 的点，但如果答案简洁（如你的），那么你使用的格式完全没问题。

【解决方案2】：

您可以使用 :active pseudo element。

如果您的 HTML 是：

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

你可以用 CSS 做到这一点：

nav a {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

nav a:hover {
    color: #3e82f7;
}

nav a:active {
    color: #db4437;
}

nav a:visited {
    color: #ffeb3b;
}

如果您试图指出用户在哪个页面上，您可能希望按照以下几行来构建您的 HTML：

<nav>
    <ul>
        <li><a class="current-page" href="home.html">Home</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

还有你的 CSS：

nav a {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}
.current-page {
    color: #3e82f7;
}

【讨论】：