看起来像图像按钮的链接不听颜色：css 中的指令

Question

我有一个页面 http://www.problemio.com/problems/problem。 php, 你可以在右下角看到我有一个青色的图像。这实际上是一个链接，在该链接中我似乎无法让文本颜色显示为白色。

这是我的 CSS：

.button 
{
  display: block;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  text-color: white;
  font-weight: bold;
  text-decoration: none;
}

a:button.visited 
{
  display: block;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  text-color: white;
  font-weight: bold;
  text-decoration: none;
}

这是我如何使用 HTML 创建链接：

<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>

知道出了什么问题以及为什么链接的颜色不是白色吗？

Answer 1

您似乎正在尝试覆盖 a:link 类的样式尝试：

选项 1：

这是您尝试覆盖的类：

a:link {
    color: #3686A7;
    text-decoration: none;
}

您需要将 !important 添加到样式声明的末尾：

.button {
    color: white !important;
}

选项 2：

您可以进一步定义 a:link 类规则：

a:link.button {
    color: white;
}

Answer 2

这是因为 a:link （第 95 行）比 .button （第 109 行）更具体。

您可以通过将规则更改为

.button,
a:link.button {
    /* rules */
}

提示来修复它：

• 虽然使用 !important 可以工作，但这是一个愚蠢的解决方法，最终会给您带来麻烦，而且它实际上是一种误用 - http://www.w3.org/TR/CSS2/cascade.html#important-rules< /a>
• 使用用于 Firefox 的 Firebug 或 Chrome 的 inspect element，用于检查影响给定元素的 css。

Answer 3

在您的 .button 类中，使用：color: white !important;。出现此问题的原因是 a 样式声明是在 .button 声明之后应用的，实际上取消了您为链接的 color 属性而设置的颜色。使用 !important 可确保将 color 规则应用于任何其他规则。

Answer 4

这是因为 common_elements.css 中有另一个类的优先级高于 .button

a:link 
{
    color: #3686A7;
    text-decoration: none;
}

尝试通过 !important 使您的 .button 具有更高的优先级