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

基本上是因为你将样式应用于span / div而不是锚，而span / div没有a.hover等等。

通过从每个a：样式定义中删除.blue按钮进行快速测试，可以更正确地进行测试。

这是我根据你的样本设置的小提琴。

http://jsfiddle.net/tS9vt/

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

编辑：这是链接http://jsfiddle.net/LuaAv/

CSS不适用于链接

2 个答案: