css: override active link style?

i have the following selector in my css:

a:active {
  position: relative;
  top: 1px;
}

So every link has this little button-effect when it's pressed.

How can i prevent that behaviour for specific links?

e.g. i have a "back to top" link on my website that shouldn't have thi开发者_StackOverflow社区s behaviour.

a#back-to-top {
    position:fixed;
    right:0px;
    bottom:20px;
    width:20px;
    height:20px;
    background:green;
}

In this case the "back-to-top" starts to jump. However if I try to reset this it doesn't work.

a#back-to-top:active  {
    position:fixed !important;
    bottom:20px !important;
}

any idea what I'm doing wrong or how I could exclude specific links from that active behaviour?

Try resetting the top property as well.

a#back-to-top:active  {
    position: fixed !important;
    top: auto !important;
}

The following

a#back-to-top:active {
  position:fixed;
  top: auto;
}

would fix it, since it is more specific and will get applied, and it overrides the part that makes your button move..

No need for the !important directive since the rule has higher specificity and will get applied instead..

demo: http://jsfiddle.net/gaby/zUEER/

i think you should "reset" the top decleration

a#back-to-top:active  {
    position:fixed;
    bottom:20px;
    top: auto;
}

also, use !important only if for some reason the a#back-to-top:active style declartion comes before a:active one.