Q:

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: 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

A:

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.