如何在CSS中设置一种样式来覆盖另一种冲突样式? [英] How can I set one style to override another conflicting style in CSS?

问题描述

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

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 }

和

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

谢谢！

更新后的代码以澄清

 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 }

推荐答案

首先，如果您不想让浏览器的历史记录干扰您的样式，请使用:visited伪类来匹配浏览器的样式.未访问的链接，然后只需根据您的数据库记录手动应用类.

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

执行以下操作:

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

a.read {
    color: #444;
}

这篇关于如何在CSS中设置一种样式来覆盖另一种冲突样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！