css - 从供应商控制的样式表中删除或重置高特异性规则

Question

我正在 CMS 中处理一些 CSS，强制使用一些初始样式。我无法删除或修改此样式表。 CMS 样式表中的一行是

a:visited {
    color: purple;
}

我在我自己的样式表中定义了几个类来设置文本的颜色:

.foo {
    background-color: blue;
    color: white;
}

.foo 为大多数文本正确设置颜色，包括未访问的链接。但是，由于 a:visited 规则具有更高的特异性，任何已访问的链接都显示为紫色。

如何重置或删除此已访问链接规则？

---

我想避免在我的样式表中添加更具体的选择器——这只会使过于具体的选择器问题更加复杂:

foo, a.foo {
    background-color: blue;
    color: white
}

我尝试将已访问链接的颜色设置回其初始值:

a:visited {
    color: initial
}

但是，该 规则比.foo 具有更高的特异性。我的文本显示为浏览器的默认黑色，而不是所需的白色。

Answer 1

它通常被认为有点 hack，但如果您不想使用更具体的选择器，请对所需的选择器使用 !important，它将覆盖供应商样式表。

.foo {
    background-color: blue !important;
    color: white;
}

我个人的偏好是为页面的不同部分使用不同样式的链接，例如菜单链接、主要部分中的链接和页脚中的链接，都将采用不同的样式。