css - 如何在同一页面上添加多个链接样式？

Question

我在一个页面上有两个超链接。我对“link1”（白色文本/红色翻转）上的 css 很满意，但是我想为“link2”设置不同的样式。

我为此部分创建了一个单独的 css，并设法将其着色为绿色，但我无法摆脱红色的翻转效果？

有谁知道如何覆盖“link2”上的红色翻转效果？

http://www.signport.co.uk/test/testsize3.html

谢谢！

Answer 1

对两个不同的链接使用两个不同的类

Answer 2

为悬停属性添加 CSS 规则。

这是一个向您展示的小提琴：http: //jsfiddle.net/6cLJ8/

导致您的问题的代码（在您的 CSS 中）是：

a:hover {
    background-color: #f00;
}

覆盖它：

.readmoretext a:hover {
    background: none;
}

Answer 3

您的样式表存在一些问题：

首先，您正在使用 this .readmoretext A。锚标记的正确 CSS 选择器是小写的“a”，因此需要将其更正为.readmoretext a.

完成后，添加background-color: transparent;到悬停规则以删除红色背景。

最后，color悬停规则有两个属性。样式表级联，正如其名称所示。由于只会color应用最后一条规则，因此第一个规则已过时。