html - 覆盖 :link by class 的 CSS

Question

在现有的 CSS 文件中，我们有:

a:link {
    text-decoration: none;
    color: #0486d9;
}

a:visited {
    text-decoration: none;
    color: #0486d9;
}

这很好，但我不希望在所有情况下都使用该样式。例如，对于此链接，我希望它始终为白色并带有下划线:

<a id="someId" class="GridviewSort" href="...">Date</a>

我以为这样就可以了:

.GridviewSort a:link {
    text-decoration: underline;
    color: white;
}

.GridviewSort a:visited {
    text-decoration: underline;
    color: white;
}

但事实并非如此。保留了原来的风格。我做错了什么？

编辑:

谢谢，stybl。出于某种原因，原来的蓝色仍然占主导地位。但是下划线正在工作!这是正在发生的事情:

编辑 2:

好的，在同一个样式表中更上一层是这样的:

a {
    color: #0486d9 !important;
}

这仍然强制链接为蓝色。我不想更改或删除此行，因为它可能会对网站的其他地方产生影响。有没有办法覆盖这个？

Answer 1

.GridviewSort a:visited目标 <a>属于 GridviewSort 元素的子标签类(class)。你想要的是目标 <a>具有该类的标签。

这应该有效:

a.GridviewSort:link {
    text-decoration: underline;
    color: white;
}

a.GridviewSort:visited {
    text-decoration: underline;
    color: white;
}

注意:如果您打算为已点击和未点击的链接使用完全相同的样式，您可以像这样缩短它:

a.GridviewSort:link,
a.GridviewSort:visited {
    text-decoration: underline;
    color: white;
}