CSS: Rewriting element declarations

CSS: Rewriting element declarations

There is a common link declaration
a {
color: #993300;
text-decoration: none;
cursor: hand;
}
a:hover {
color:#993300;
text-decoration:underline;
}
a:visited {
color:#4c7095;
}
For some links I have to rewrite link declarations. For example, I have to change colors, font-weight, and  text-decoration for some link. It's not obvious task, and I spent 30-40 minutes on Internet looking for some ideas. One of the idea was to use on MouseOver and OnMouseOut events which does not work if link is visited.  I continued my search and found some excellent idea.  The idea was posted on stackoverflow.com by  the owner of the site rexmorgan.net Here is his suggestion:
"Inline styles only have rules; the selector is implicit to be the current element.
The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.
However, you can get close, because a style set can technically go most anywhere:
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>"

So, following his advice, I added unique id to my link:
<a href="../../../test.aspx" class="topLink" accesskey="0" id="js2" title="Go to Test page">Help</a>

And added some code in CSS:

.topLink 
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}

#js2:hover
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}


#js2:visited
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}


Now my link looks and behaves differently than all links on my website.