CSS规则被覆盖

Question

出于某种原因，我的“a：link”规则会覆盖应用于链接的特定规则。

a:link  {color: red  ;}
.button {color: white; background: red;}

<a class="button" href="blah.com">Hello</a>

最终结果是上面显示的链接有红色文字和红色背景，而我希望颜色为.button规则中指定的白色

我觉得我做错了什么......有什么想法吗？

Answer 1

a:link选择器的specificity高于.button，因此对于两者都适用的元素（如示例所示），前者优先，使文本变为红色。

如果你知道按钮会在很多时候包含链接，你可以简单地设置这些链接的样式：

a:link  {color: red  ;}
.button, a.button:link {color: white; background: red;}

或者，您可以人为地提高.button选择器的特异性，使其至少等于a:link的选择性：

a:link  {color: red  ;}
html .button {color: white; background: red;}

我不推荐这种解决方案，因为它非常脆弱，而且看起来多余的html部分确实起着重要作用，并不是很明显。

另一种可能的解决方案是使用!important，虽然我也会避免这种情况，特别是因为有一个不使用核武器的完美替代品。

Answer 2

您可以将第二条规则更改为：

.button {color: white !important; background: red;}

注意!important，它会使该规则自动具有更高的优先级。

Answer 3

这是因为a:link比.button更具体。 CSS中更具体的规则总是覆盖不太具体的规则。

你可以（a）添加！重要的颜色声明像这样......

.button {color: white !important; background: red;}

...或（b）使.button选择器更具体，如此......

a.button {color: white; background: red;}

Jsfiddle示例：http://jsfiddle.net/ykHVa/

就我个人而言，我更喜欢（b）而不是（a），因为!important可以使CSS成为一个随时间调试的噩梦。

Answer 4

带有：链接的规则只会被另一个规则推翻，并且后面跟着：链接。您需要一个同样具体的规则。

a:link  {color: red  ;}
.button,.button:link {color: white; background: red;}

你也可以使用！important，正如其他回答者所指出的那样。但这并不理想，因为当你稍后尝试添加新规则时会让人感到困惑。

http://jsfiddle.net/PNxPf/