CSS不工作的链接

Question

我不明白为什么下面的CSS不会做它看起来做的，如果任何人可以解释为什么或帮助显示我做错了什么，将不胜感激。

<style> 
    .button-blue a:link{ 
    text-decoration: underline overline; color: red!; 
    background: #55a4f2!; 
    padding: 12px 24px!; 
    -webkit-border-radius: 6px!; 
    -moz-border-radius: 6px!; 
    border-radius: 6px!; 
    color: white!; 
    font-size: 16px!; 
    font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif!; 
    text-decoration: none!; 
    vertical-align: middle!; 
    font-weight:bold!; 
} 
.button-blue a:hover { 
    background: #1071d1; 
    color: #fff; 

} 
.button-blue a:active { 
    background: #3e779d; 
} 
</style> 

<div class="button-blue"> 
<a href="dd" class="button-blue">Post Comment</a> 
</div> 

<span class="button-blue"> 
<a href="dd" class="button-blue">Post Comment</a> 
</span> 

http://jsbin.com/etijiz

Answer 1

它不会做你希望它这样做，因为你有语法错误的东西。您似乎已使用!而不是!important。如果您删除感叹号，它会看起来更像您预期的那样。

通常使用!important是一个坏主意，如果您发现自己使用它，则可能需要重构某些内容。了解更多关于CSS选择器特异性如何工作的知识将是一个好主意。

Answer 2

基本上是因为你申请的风格跨度/ DIV，而不是锚和跨度/每格不具有a.hover等等等等

通过从每个a：样式定义中删除.blue按钮进行的​​快速测试显示它可以更加正确地工作。

这是我根据您的示例设置的小提琴。

http://jsfiddle.net/tS9vt/

添加显示没有感叹号更好行为的新链接评论。

编辑：这里有一个链接http://jsfiddle.net/LuaAv/