Html 看起来像图像按钮的链接没有'；t听颜色：css中的说明

我有一页在， 你看，在右下角我有一个青色的图像。这确实是一个链接，在这个链接中，我似乎无法使文本颜色显示为白色

这是我的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>

---

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

似乎您正在尝试覆盖

a:link

类的样式尝试：

选项1:

以下是您试图覆盖的类：

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

您需要添加

！重要信息

在样式声明的末尾：

.button {
    color: white !important;
}

选项2:

您可以进一步定义

a:link

类规则：

a:link.button {
    color: white;
}

---

在您的

.button

类中，使用以下命令：

颜色：白色！重要的。出现此问题的原因是
a
样式声明应用于
.button
声明之后，实际上取消了为链接的颜色属性设置的颜色。使用
！重要信息
确保将
颜色
规则应用于任何其他规则。
这是因为
a:link
（第95行）比
。按钮
（第109行）更具体

您可以通过将规则更改为

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

小贴士:


使用
时！重要信息
会起作用，这是一种愚蠢的解决方法，最终会给你带来麻烦，实际上是一种误用-
使用Firefox的
Firebug
，或Chrome的
inspect元素
，检查影响给定元素的css
这是因为在common_elements.css中有另一个类的优先级高于.button

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

尝试通过
使您的.button更具优先级！重要信息
，除非另一方也是！重要信息

。你在鼓吹滥用

！重要信息

。我的理解是，因为

！重要信息

中断正常的级联顺序，仅当需要中断时才应使用。否则，您可能会破坏用户的可用性。因此，我认为你的建议不是一个好的做法——很抱歉，我在第一次评论中不清楚。根据你评论中的“选票搜索”部分。我是否应该停止仅仅因为我提供了答案而成为社区的一部分？我不是在寻找上升票：我+1'd@JamesHill，-1'd是一个现在被删除的答案，它通过改变

a:link

上的样式破坏了其他链接，并且没有投票给其他链接，因为我觉得他们既不值得上升票，也不值得下降票。如果您愿意，我们可以进一步讨论这个问题，或者您可以标记我以引起主持人的注意。@ANeves，不是这样。中断是为了消除两个相互冲突的样式规则之间的歧义，因此使用

！重要的

是，IMHO，完全有效的。我没有看到歧义或冲突，我看到特定性的概念按照规范工作。但我也看到我混淆了级联顺序-作者正常和重要声明位于相邻级别，因此使用

！重要信息

不应影响用户声明。我道歉+1我猜，对@archil也是这样。谢谢你的工作。除了IE中按钮的背景是白色之外-知道为什么会这样吗？

过滤器：.button

中的code>属性似乎没有被

a:link.button

覆盖。所以它仍然存在。我猜重置

过滤器：a:link.按钮中的code>属性将修复它。这个
a:button.visted
应该是
a:visted.button
，不是吗？也就是说：一个锚，它是
：访问的
和
按钮
。