Pseudo class :active not applying

问题

I wanted to make link text change color when the selected page is currently active. So i used :active pseudo class, but it keeps resetting to the general link color. I followed the cascading rules by putting the :active last, but it still doesnt work. I also tried the adding "!important" to the :active color. Still the same result.

I have made this simple test, to make it easier to pinpoint and fiddle with.

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

with css looking like this

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

#nav:hover {
color:blue;}

#nav:active {
color:black;}

So what happens is that #nav:active color gets applied only while the mouse is pressed down. After that it reverts to #nav color of red.

回答1:

Active is for when the current element is being clicked. Not for when the URL matches the currently active link.

There might be better ways to do this, but the two that I've used:

Add in an class on the link when generating the page from the server or use some sort of JavaScript to set the class.

The end result of both would be something like:

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

来源：https://stackoverflow.com/questions/27582398/pseudo-class-active-not-applying

标签

css

pseudo-class