看起来像一个图像按钮的链接不听色彩：在css中的指令

我有一个页面在http://www.problemio.com/problems/problem.php, 和你看到在右下角我有一个青色图像。这真的是一个链接，并在该链接我似乎无法让文字颜色显示为白色。看起来像一个图像按钮的链接不听色彩：在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>

任何想法什么错误，为什么链接的颜色不白色？

来源

2011-12-02 GeekedOut

呵呵，这个'更优先：按钮。 visited“应该是'a：visited.button'而不是？那就是：一个锚：“visited”和“.button”。 – ANeves

这是因为a:link（95行）比.button（行109）更具体。当使用!important将工作

，这是一个愚蠢的解决办法，最终将让你陷入困境，它是：

您可以通过更改规则解决它
```
.button, 
a:link.button { 
    /* rules */ 
} 
```
提示实际上是一种滥用 - http://www.w3.org/TR/CSS2/cascade.html#important-rules
对于Firefox或Chrome的inspect element使用Firebug来检查影响给定元素的css。

来源

2011-12-02 14:19:30 ANeves

谢谢你的工作..除了按钮的背景是IE中的白色 - 任何想法，为什么可能是这种情况？ – GeekedOut

'.button'的'filter：...;'属性似乎没有被'a：link.button'覆盖。所以它仍然存在。我想重置'a：link.button'中的'filter：...;'属性可以解决它。 HTH – ANeves

看来，你试图重写a:link类尝试的造型：

选项1：

这里是你想覆盖类：

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

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

.button { 
    color: white !important; 
}

选项2：

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

a:link.button { 
    color: white; 
}

来源

2011-12-02 14:17:44

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

来源

2011-12-02 14:19:23

除非另一个也是'！important'。你提倡滥用'！important'。 – ANeves

我对http://www.w3.org/TR/CSS2/cascade.html#cascading-order的理解是，因为'！important'会破坏正常的级联顺序，所以只能在意外中断时使用它。否则，你可能会破坏用户的可用性。因此，我认为你的建议不是一个好的做法 - 对不起，我在第一条评论中并不清楚。 – ANeves

根据您的评论的“投票狩猎”部分。我是否应该因为我提供了答案而停止成为社区的一员？我不是在寻找upvotes：我+ @JamesHill，-1'da现在删除了通过改变'a：link'上的样式来破坏其他链接的答案，并且没有投票给其他人，因为我觉得他们不配得到赞扬或降低赞誉。如果你愿意，我们可以进一步讨论这个问题，或者你可以让我担任主持人的注意。 – ANeves

那是因为你在common_elements.css另一个类，它具有更高的优先级比.button

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

尝试使你的.button通过!important

来源

2011-12-02 14:19:51 archil

看起来像一个图像按钮的链接不听色彩：在css中的指令

回答

相关问题