CSS not styling <a>

Question

I am trying to style my <a> tags via CSS but they are not changing.

HTML

<div id="menu">
    <ul>
        <li><a href="#">Bugs</a></li>
    </ul>
</div> 

CSS

a.active, a.link, a.visited {
    color: black;
    text-decoration: none;
}
a.hover {
    color: black;
    text-decoration: underline;
    font-style: italic;
}

Not sure why the CSS would not work. The external stylesheet works for the other tags used throughout the page (IE: <h1> is styled properly and they are on the same .css file)

Answer 1

In addition, links can be styled differently depending on what state they are in.

The four links states are:

1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - a link the moment it is clicked

See example below:

 /* unvisited link */ a:link { color: blue; } /* visited link */ a:visited { color: aquamarine; } /* mouse over link */ a:hover { color: green; } /* selected link */ a:active { color: red; } 

 <a href="#a">This is a link</a> 

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link
• and a:visited a:active MUST come after a:hover

Answer 2

它应该是，

a:active, a:link, a:visited, a:hover

Answer 3

If you want to style on hover, link and visited use

a:hover a:link a:visited

in your css