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

发布时间：2020-12-14 22:27:23 所属栏目：资源来源：网络整理

导读：我正在显示链接，当用户点击它们时，标记为在数据库中读取的链接。我想根据数据库信息而不是用户的浏览器历史来设计点击和未点击的链接。到目前为止，当我使用： 10 a:visited { 11 color: #444; 12 } 13 14 a:link { 15 font-weight: bold; 16 color:black;

我正在显示链接，当用户点击它们时，标记为在数据库中读取的链接。我想根据数据库信息而不是用户的浏览器历史来设计点击和未点击的链接。到目前为止，当我使用：

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 }

解决方法

首先，如果您不希望浏览器拥有自己的历史记录来干扰您的样式，请使用以下访问伪类来匹配未访问链接的样式，然后根据您的DB记录手动应用类。

关于冲突的样式，这一切都是关于选择器的specificity，如果两个具有相同属性的两个具有相同的特征，则最后一个“获胜”。

做这个：

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

a.read {
    color: #444;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!