How can I solve this CSS links inheritance problem?

Question

It's stumped me an I've tried a couple of things - then again I'm not very experienced so I may just be going about it the wrong way. Basically I want to have different link styles for both the navigation and the pagination. The #navigation styling is overriding my .pagination styling though, and it doesn't appear to matter if the pagination is a class or an ID. I've also tried putting !important in the pagination styling, but this then makes the navigation inherit the pagination (been using firebug to check the inheritance).

#navigation a:active, a:link, a:visited, a, a:focus {
color: #ffde2f;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
text-decoration: none;
}

#navigation a:hover {
color: #ffffff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
text-decoration: none;
} 

.pagination a:active, a:link, a:visited, a, a:focus {
color: #fff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
}

.pagination {
color: #fff;
font-size: 14px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

}

Answer 1

Change #navigation, use a class on the tag rather than style on the ID. Styling by ID is more specific, hence gets higher precendence in styling.

Answer 2

try this change

.pagination a:active, a:link, a:visited, a, a:focus {

to

.pagination a:active, 
.pagination a:link, 
.pagination a:visited, 
.pagination a, 
.pagination a:focus {

Answer 3

Use the child selector:

#navigation > a
{
  ...
}

.pagination > a
{
  ...
}

It is not supported by IE6, but it is dying.