正在覆盖CSS规则

出于某种原因，我的“a:link”规则正在覆盖应用于链接的特定规则

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

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

a:link{color:red；}
.按钮{颜色：白色；背景：红色；}

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

---

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

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

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

---

注意

！重要信息

，它使该规则自动具有更高的优先级。

这是因为

a:link

比

按钮

更具体。CSS中更具体的规则总是覆盖不太具体的规则

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

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

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

。。。或者（b）使

按钮

选择器更具体，如下所示

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

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

JSFIDLE示例：

---

就我个人而言，我更喜欢（b）而不是（a），因为

！重要信息

会使CSS随着时间的推移成为调试的噩梦。

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

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

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

---

选择符

a:link

有一个高于

的按钮，因此对于两者都适用的元素（如您的示例中），前者优先，使文本变为红色

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

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

或者，您可以人为地增加
按钮
选择器的特异性，使其至少与
a:link
的特异性相同：

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

我不推荐这种解决方案，因为它非常脆弱，而且看起来多余的
html
部分并没有立即显现出它的重要作用。

另一种可能的解决方案是使用
！重要信息
，尽管我也会避免这样做，特别是因为有一个非常好的替代品不使用核武器。
试试。按钮{颜色：白色！重要信息；背景：红色；}我知道我可以使用'！“重要”但这似乎不是语义解决方案。。。我的代码中有一个错误。我相信人们总是这样做而不使用'！重要信息'请尝试确保
.button
规则位于CSS中的
a:link
规则之后。但是
！重要提示
适用于这种情况，因为您正试图覆盖另一条规则。这就是它的设计目的。这个想法是正确的，但我认为这个例子是不正确的。它应该是一个。按钮：链接，而不是。按钮a：链接。它不是按钮内部的链接，而是按钮的a类。如果按钮无论其访问状态如何都应更改颜色，并且某个地方有
a:visted
规则，请使用
a.button
并确保该规则排在最后。