使当前页面的标题在导航栏中更改颜色。 (HTML/CSS)答案

【问题标题】：Making the current page's title change colour in the nav bar使当前页面的标题在导航栏中更改颜色。 (HTML/CSS)
【发布时间】：2018-03-27 21:06:28
【问题描述】：

您好，提前道歉，因为我知道这是一个愚蠢的问题，但我已经搞砸了太久了，我仍然找不到有效的解决方案。我正在尝试在我网站顶部的导航栏中更改当前页面的标题颜色。导航栏是用 html 构建的：

<div class="navbar">
        <a href="index.html" class="active" >Home</a>
        <a href="indian.xml">Indian</a>
        <a href="italian.xml">Italian</a>
</div>

并且尝试设置样式的 CSS 是：

.navbar{
overflow: hidden;
background-color: #F5861F;
width: 100%;
}
.navbar a{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar a:active{
    color:#ffe7d1;
}
.navbar a:visited{
    color:#8b4e14;
}
.navbar a:hover{
    color:#874404;
    font-size:20px;
}
.navbar a:current{
    color:#ffe7d1;
}

'.navbar a:current' 在我读到 active 可能不会像我希望的那样（我将 class="active" 更改为 class="current"）后留在了那里，但这也不起作用。

我在这里缺少什么？非常感谢您抽出宝贵时间回答这么愚蠢的问题。

【问题讨论】：

您应该通过JS在当前页面的链接/标题上更改/添加类active/current。
使用类选择器.active而不是pseudo-state选择器:active, .navbar a.active { color:#ffe7d1; }
@Krusader 你能举个例子说明如何做到这一点吗？我根本不懂多少JS。
这里是一些原始示例，以显示如何使用它jsfiddle.net/5wed3xhm

标签： html css navbar highlight

【解决方案1】：

:active 是错误所在。

试试这个

.navbar a.active{
  color:#ffe7d1;
}

【讨论】：

我改变了 .navbar a:active{ color:#ffe7d1; } 到 .navbar a.active{ 颜色:#ffe7d1;并没有什么区别，我还缺少什么吗？顺便说一句，感谢您的时间。
自己试过了，效果很好。如果您的页面中有更多 CSS，则可能另一个选择器会覆盖此选择器。
啊！这是 .navbar a:visited{ color:#8b4e14;部分是这样做的。有没有办法让我访问的链接会改变颜色，但当前页面会覆盖它并仍然改变颜色？ @Benoit Gambier
将“活动”选择器放在 CSS 中“已访问”的选择器之后，以便之后阅读。

【解决方案2】：

试试这个

a.active {color: red}

a:active 不代表一个类，而是一个 <a> 元素伪类的选择器

https://www.w3schools.com/css/css_pseudo_classes.asp

【讨论】：

我改变了 .navbar a:active{ color:#ffe7d1; } 到 .navbar a.active{ 颜色:#ffe7d1;并没有什么区别，我还缺少什么吗？顺便说一句，感谢您的宝贵时间。