I created two following links

<a runat="server" href="http://www.google.com.vn" class="myex">Testing link</a>
<br />
<a id="A1" href="#" target="_self" title="abc">Testing link 1</a>

And here is CSS rules

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF; font-variant:small-caps; background-color:Yellow;}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

It seems that rules don't have any afftect to color of links. When I hovered over the link, the background color and the font changed. However, the color of links was default.

Please tell me how to change the color of anchors.

I pressed Ctl+F5 many times, the rules for color haven't been applied. And the rules for font and background-color have effect although they were added later. However, I can do it by modifying a little bit:

<div class="duc">
<a runat="server" href="http://www.google.com.vn" class="myex">Testing link</a>
<br />
<a id="A1" href="#" target="_self" title="abc">Testing link 1</a>
</div>

duc a:link {color: #00FF00}  /* visited link */
.duc a:visited {color: #00FF00}  /* visited link */
.duc a:hover {color:Black; font-variant:small-caps; background-color:Yellow;}   /* mouse over link */
.duc a:active {color: #0000FF}   /* selected link */

This sounds like there may be another snippet of CSS overriding your styles - either in the skin css, container css, or a module css somewhere.  I would also suggest checking the portal css.