为什么我的链接的活动状态不起作用？ [复制]答案

【问题标题】：Why would the active state of my links not work? [duplicate]为什么我的链接的活动状态不起作用？ [复制]
【发布时间】：2019-12-16 05:55:09
【问题描述】：

这是我的 CSS 来更改我的菜单链接颜色的默认设置：

.main-header-menu a {
color: #ffffff !important;
}

.main-header-menu a:hover {
color: #8feaff !important;
}

.main-header-menu a:active {
color: #8feaff !important;
}

一切都非常标准且非常正常 - 但由于某种原因 :active 状态不会改变。

你能看出为什么不这样做吗？我希望它会变成上面写的#8feaff。

谢谢

【问题讨论】：

:active 选择器用于选择活动链接并设置其样式。当您单击链接时，链接将变为活动状态。
如果您想知道用户是否访问过该链接，请使用:visited
谢谢@Ahmed，这就是我的意思——我点击了活动链接，例如 > 从家到联系人，在联系页面上，链接应该改变颜色为“活动”，但使用上面的代码没有变化...

标签： css

【解决方案1】：

:active 选择器用于选择活动链接并设置其样式。当您单击链接时，该链接将变为活动状态。
如果需要 :active 选择器用于选择和设置active 链接的样式。单击链接时，链接将变为活动状态。
如果您想在访问链接时应用样式，请使用visited。

<a href="www.google.com">Google</a>
a:visited{
  background-color:yellow;
}

【讨论】：

【解决方案2】：

CSS 中没有 :active 状态。你应该添加 .active 类

body{
background: black;
}

.main-header-menu{
display: inline-block}
.main-header-menu a {
color: #ffffff !important;
}

.main-header-menu a:hover {
color: #8feaff !important;
}

.main-header-menu a.active {
color: #8feaff !important;
}

<div class="navbar">
<div class="main-header-menu"> <a class="">menu</a> </div>
<div class="main-header-menu"> <a class="active">menu</a> </div>
</div>

【讨论】：

CSS 中肯定存在 :active 状态。