title: CSS Specificity: ID overwritten by class + element
body: <p>So, my id selector with a colour !important is being overwritten by a simple .class h1 selector with no !important. I am baffled and unable to find any info on this.</p>
  
  <p>I know about css specificity and no matter how I look at it, I would expect the h1 to be green even without the !important.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body id='id'&gt;
    &lt;div class='class'&gt;
      &lt;h1&gt;Lorem ipsum&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.class { color: black; }
  .class h1 { color: red; }
  #id { color: green !important; }
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/TJ8tj/2/" rel="nofollow">http://jsfiddle.net/TJ8tj/2/</a></p>
  
  <p>I have tested this behaviour in latest Chrome, Safari and Firefox on OS X 10.9.1</p>