如何设置一种样式来覆盖CSS中的另一种冲突样式？

Question

我正在显示当用户点击它们时在数据库中标记为已读的链接.我想根据数据库信息而不是用户的浏览器历史记录来设置单击和未单击链接的样式.到目前为止,当我使用:

 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 }

和

<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>

并且已经访问过一个链接,但是没有访问过这个页面(它在数据库中仍被标记为未读),我得到了奇怪的结果.例如,只有颜色可以使用,但重量不会,等等.

当冲突时,是否有可能让一种风格覆盖另一种风格？

谢谢!

编辑:更新代码澄清

解

 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

您可以使用!important指令.例如.

.myClass
{
   color:red !important;
   background-color:white !important;
}

如果您需要覆盖任何其他正在应用的样式,请在每个样式后放置!important,如上所示.

Answer 2

首先,如果您不希望浏览器自己的历史记录干扰您的样式,那么使用:visited伪类来匹配非访问链接的样式,然后根据您的数据库记录手动应用类.

关于冲突的样式,所有关于选择器的特异性,如果具有相同属性的两个冲突(具有相同的特异性),则最后一个"获胜".

做这个:

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

a.read {
    color: #444;
}