CSS is not working for links

I can not figure out why the below css will not do what it appears to do, if anyone can explain why or help show what I am doing wrong, would greatly appreciate.

<style>
  .button-blue a:link{
   text-decoration: underline overline; color: red!;
   background: #55a4f2!;
   padding: 12px 24px!;
   -webkit-border-radius: 6p开发者_如何学JAVAx!;
   -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

It doesn't do what you expect it to do because you have syntax errors. You appear to have used ! instead of !important. If you remove the exclamation marks it will look a little more like you expected it to.

Generally it is a bad idea to use !important and if you find yourself using it you probably need to refactor something. It would be a good idea to learn more about how CSS selector specificity works.

Basically it's because you're applying the style to the span/div and not the anchor and a span/div doesn't have an a.hover etc etc.

A quick test by removing the .blue-button from each of the a: style definitions shows it working more correctly.

Here's the fiddle I set up based on your sample.

http://jsfiddle.net/tS9vt/

Added a comment with a new link showing better behaviour without the exclamation marks.

Edit: here's that link http://jsfiddle.net/LuaAv/