在CSS中，是否有办法在覆盖正常状态后保留链接的悬停属性?

Question

我为我的链接定义了默认属性:

a{
    color: blue;
}
a:hover{
    color: red;
}

问题是，当我这样做时，我失去了所有的悬停属性:

#header a{
    color: gray;
}

因此，为了使悬停像我之前在默认值中定义的那样工作，我必须再次声明它:

#header a:hover{
    color: red;
}

有没有办法做到这一点，而不失去原来的悬停动作定义?

Answer 1

不幸的是，如果你想让它在所有浏览器中工作，你必须重写它。

a { color:blue; }
a:hover { color:red; }
#header a { color:grey; }
#header a:hover { color:red; }

的例子。

或者，您可以使用!important。通常情况下，这是你的css中出现异常的信号，但这似乎是复制css的唯一选择。

a { color:blue; }
a:hover { color:red !important; }
#header a:hover { color:red; }

的例子。

您也可以使用css编译器，如sass或less，它可以让您在不重复工作的地方编写，但这超出了本问题的范围。

Answer 2

您正在使用级联覆盖样式。加上"#header a"使该样式比原来的样式更重。您可以使用!important来覆盖它(尽管我不建议这样做)。

Answer 3

可以这样做的一种方法是指定默认样式为!important。

使用!important通常是一个确定的标志，你的代码可以改进，但在这种情况下，没有重新定义的风格，这似乎是最好的选择(最好的我知道现在)。

a:hover{
    color:blue !important;
}

工作示例

还要注意，如果你选择使用特定的选择器，你可以将两个选择器组合在一起，以减少代码重复。

a:hover, #header a:hover{ color: red;}