css - 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器具有比更高的特异性.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）像这样将 !important 添加到颜色声明中...

.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

带有 :link 的规则只会被另一个带有 :link 的规则推翻。你需要一个同样具体的规则。

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

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

http://jsfiddle.net/PNxPf/