按类替换：链接的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。出于某种原因，原始的蓝色仍然占主导地位。但是Underline工作正常！以下是发生的事情：

编辑2：

好的，在同一样式表中进一步说明了这一点：

a {
    color: #0486d9 !important;
}

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

Answer 1

.GridviewSort a:visited定位<a>个标记，这些标记是具有GridviewSort类的元素的子元素。您想要的是定位具有该类的<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;
}