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
使用Firebug用于Firefox或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

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

4 个答案: