Html 如何在CSS中设置一种样式以覆盖另一种冲突样式？

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

 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 }

及

---

你可以用这个！重要指示。例如

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

地方！如上图所示，当您需要覆盖任何其他正在应用的样式时，请在每个样式之后输入重要信息。

请尝试：

a.unread, a:visited.unread {style 1}

a.read, a:visited.read {style 2}

---

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

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

这样做：

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

a.read {
    color: #444;
}

---

您可以定义CSS选择器的特定性

a{/*style 1*/}

将被

diva{/*style 2*/}

其中

div

是

a

---

有关更多详细信息，请访问。

一、检查您的HTML，确保链接中添加了

class=“read”

和

class=“unread”

第二，尝试在

中添加
a
。阅读
和
。未读
CSS规则：

a.read { /* ... */ }
a.unread { /* ... */ }

如果不起作用，请尝试在
之前添加空格！重要信息
。我认为这不是必需的，但应该包括在内。
我更新了问题中的代码！重要信息不会改变结果。谢谢你！没问题。我认为web浏览器对使用伪选择器设置锚定标记样式的支持各不相同。你在不同的浏览器中试过吗？我如何覆盖已经有
的东西！重要信息
？谢谢。我稍微调整了一下（见上面的编辑），但基本上就是这样做的。我必须明确使用“打火机”。。。怪人不太确定为什么“正常”不起作用，怪人。你不应该需要！重要信息，因为选择器具有更高的特殊性。你根本不需要“未读”类。从元素中省略“read”类将具有相同的效果。
a:link, 
a:visited {
    font-weight: bold;
    color: black;
}

a.read {
    color: #444;
}

a.read { /* ... */ }
a.unread { /* ... */ }