Setting a:link, a:hover, etc in a css class with a DIV

I'm using the following html code:

<div id="topMenu" class="spanningMenu">
        <table>
            <tr>
                <td width="6.25%"></td>
                <td width="12.5%"><a href="index.htm">Home</a></td>
                <td width="12.5%">|</td>
                <td width="12.5%"><a href="contact.htm">Contact Us</a></td>
                <td width="12.5%">|</td>
                <td width="12.5%"><a href="directions.htm">Directions</a></td>
                <td width="12.5%">|</td>
                <td width="12.5%"><a href="disclaimer.htm">Disclaimer</a></td>
                <td width="6.25%"></td>
            </tr>
        </table>
    </div>

and my css looks like this:

.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
    color: #000;
}

Which doesn't work. The section above is still in开发者_StackOverflow社区heriting it's font color from the parent container. I understand that

I've tried a few different variations of spanningMenu a:link, and nothing seems to be working. Google's not helping like it normally does.

Thanks!

Try this:

.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
    color: #000 !important;
}

If that works, you have another rule that CSS thinks is more important. Like maybe td a { color: something }? You can read in the spec about the complicated rule precedence order.

Try adding !important to the end of the style, so it looks like this:

.spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
    color: #000 !important;
}

I guess, its pretty simple.

.spanningMenu a, .spanningMenu a:link, .spanningMenu a:visited, .spanningMenu a:active {
    color: #000;
}