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

【问题标题】：How can I set one style to override another conflicting style in CSS?如何设置一种样式来覆盖 CSS 中的另一种冲突样式？
【发布时间】：2010-10-07 16:22:11
【问题描述】：

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

 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 }

【问题讨论】：

标签： html css fonts lamp

【解决方案1】：

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

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

当您需要覆盖同时应用的任何其他样式时，如上所示，在每个样式之后放置 !important。

【讨论】：

我更新了问题中的代码。 !important 不会改变结果。不过谢谢！
没问题。我认为 Web 浏览器对使用伪选择器设置锚标记的支持会有所不同。你在不同的浏览器上试过了吗？
如何覆盖已经有 !important 的东西？

【解决方案2】：

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

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

这样做：

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

a.read {
    color: #444;
}

【讨论】：

谢谢。我稍微调整了一下（见上面的编辑），但这基本上就是这样做的。我必须明确使用“打火机”。 ...奇怪
不太清楚为什么“正常”不起作用，很奇怪。您不需要 !important 对您的 font-weight 属性，因为选择器具有更高的特异性。而且您根本不需要“未读”课程。从元素中省略“读取”类将具有相同的效果。

【解决方案3】：

首先，检查您的 HTML 以确保将 class="read" 和 class="unread" 添加到您的链接中。

二，尝试在.read 和.unread CSS 规则中添加a：

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

如果这不起作用，请尝试在 !important 之前添加一个空格。我认为这不是必需的，但most examples I have seen 包含它。

【讨论】：

【解决方案4】：

试试：

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

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

【讨论】：

【解决方案5】：

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

a { /* style 1 */ }

会被

覆盖

div a { /* style 2 */ }

其中div 是a 的父元素

更多详情请访问Selectutorial。

【讨论】：