css - 伪类 :active not applying

Question

我想让链接文本在所选页面当前处于事件状态时改变颜色。所以我使用了 :active 伪类，但它一直重置为通用链接颜色。我通过将 :active 放在最后来遵循级联规则，但它仍然不起作用。我还尝试在 :active 颜色中添加“!important”。结果还是一样。

我做了这个简单的测试，以便更容易查明和摆弄。

<div id="navigacija">
<a id="nav" href="index.html">home</a>
<a id="nav" href="random.html">random</a>
<a id="nav" href="random2.html">random2</a>
</div>

CSS 看起来像这样

#nav {
color:red;
text-decoration:none;}

#nav:hover {
color:blue;}

#nav:active {
color:black;}

所以发生的是 #nav:active 颜色仅在按下鼠标时应用。之后它恢复为红色的#nav 颜色。

Answer 1

Active 用于当前元素被点击时。不适用于 URL 与当前事件链接匹配的情况。

可能有更好的方法来做到这一点，但我使用过的两种方法:

在从服务器生成页面时在链接上添加一个类，或者使用某种 JavaScript 来设置类。

两者的最终结果是这样的:

<div id="navigacija">
<a id="nav" href="index.html">home</a>
<a id="nav" class="current" href="random.html">random</a>
<a id="nav" href="random2.html">random2</a>
</div>

#nav {
color:red;
text-decoration:none;}

#nav:hover {
color:blue;}

#nav current {
color:black;}