伪类 :active 不适用

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;}