How can I set one style to override another conflicting style in CSS?

Question

I'm displaying links that get marked as read in a database when a user clicks them. I want to style the clicked and unclicked links based on the database information not the user's browser history. So far, when I use:

 10 a:visited {
 11   color: #444;
 12 }
 13
 14 a:link {
 15   font-weight: bold;
 16   color:black;
 17 }
 18
 19 .read {
 20   color: #444!important;
 21 }
 22
 23 .unread {
 24   font-weight: bold!important;
 25   color:black!important;
 26 }

and

<tr class="even">
  <td><a class="read" href="example.com">blah</a></td>
</tr>
<tr class="odd">
  <td><a class="unread" href="example.org">foo</a></td>
</tr>

and a link has been visited, but not from this page (it's still marked as unread in the database), I get weird results. For example only the color will work, but the weight won't, etc.

Is it possible to have one style override another when they conflict?

Thanks!

EDIT: updated code to clarify

Solution

 10 a:link,
 11 a:visited {
 12   font-weight: bold;
 13   color: black;
 14 }
 15
 16 a.read {
 17   color: #444;
 18   font-weight: lighter !important; /* omission or even "normal" didn't work here. */
 19 }
 20
 21 a.unread {
 22   font-weight: bold !important;
 23   color: black !important;
 24 }

Answer 1

First of all, if you don't want the browsers own history to interfere with your styles then use the :visited pseudo-class to match the style of the non-visited link, then just apply classes manually based on your DB records.

Regarding conflicting styles, it's all about the specificity of the selector, and if two with the same properties conflict (have the same specificity) the last one "wins".

Do this:

a:link, 
a:visited {
    font-weight: bold;
    color: black;
}

a.read {
    color: #444;
}