如何在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 }

- ThomasGHenry

Answer 1

你可以使用 !important 指令，例如：

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

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

- Ash

---

我更新了问题中的代码。!important 不会改变结果。不过还是谢谢！ - Thomas G Henry

没问题。我认为使用伪选择器来为锚标签设置样式的网络浏览器支持程度有所不同。你尝试在不同的浏览器中测试过吗？ - Ash

如何覆盖已经使用了 !important 的样式？ - Aaron Franke

Answer 2

首先，如果您不希望浏览器自身的历史记录干扰您的样式，则使用:visited伪类来匹配非访问链接的样式，然后根据您的DB记录手动应用类。

关于冲突的样式，这完全取决于选择器的特异性，如果两个具有相同属性的选择器产生冲突（具有相同的特异性），则最后一个“获胜”。

请执行此操作：

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

a.read {
    color: #444;
}

- Jack Sleight

---

谢谢。我稍微进行了一些调整（请参见上面的编辑），但基本上是这样做的。我不得不明确使用“lighter”。...奇怪 - Thomas G Henry

不太确定为什么“normal”不起作用，很奇怪。您不应该在font-weight属性上使用!important，因为选择器具有更高的特异性。而且您根本不需要“unread”类。从元素中省略“read”类将产生相同的效果。 - Jack Sleight

Answer 3

尝试：

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

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

- Ria

Answer 4

一、检查你的HTML代码，确保class="read"和class="unread"被添加到你的链接中。

二、尝试在你的.read和.unread CSS规则中添加a。

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

如果这不起作用，请在！important之前添加一个空格。我不认为这是必需的，但大多数我看到的例子都包括它。

- strager

Answer 5

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

a { /* 样式1 */ }

将被下面的样式所覆盖

div a { /* 样式2 */ }

其中div是a的父元素

更多细节请参见Selectutorial。

- Mark Hurd