title: CSS !important not taking precedence?
body: <p>I have the following dom structure:</p>
  
  <pre><code>&lt;div class="ui-tabs"&gt;
  &lt;ul&gt;
      &lt;li class="ui-state-default ui-tabs-selected ui-state-active"&gt;
           &lt;a href="#"&gt;Text&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the following CSS markup:</p>
  
  <pre><code>.ui-tabs .ui-state-active {
  background: #084;
  color: #E6EFEA !important;
  }
  
  a:link {
  color: #00C;
  }
  </code></pre>
  
  <p>I cannot get the first color (E6EFEA) to take precedence. I've tried it on FireFox and Chrome, Chrome even shows the a:link property scratched out ... as if some other color is taking precedence, but still renders blue (00C). Just to make sure I've taken out every other #00C refeence in the CSS file. Any ideas?</p>
  
  <p>I've also put up a crude example on <a href="http://jsbin.com/avazu/edit" rel="nofollow">JSBin</a>.</p>