title: Override span style within styled header
body: <p>This should be a simple solution, but I can't seem to figure it out. Take a look at the <a href="http://jsfiddle.net/n9EKu/1/" rel="nofollow">fiddle</a>. Why can't I override the font-size of the second span? Here is the code:  </p>
  
  <p>html:</p>
  
  <pre><code>&lt;h1&gt;
      &lt;span&gt;hello &lt;/span&gt;
      &lt;span id="span2"&gt;world&lt;/span&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>h1
  {
      font-size:2em;
  }
  h1  #span2
  {
      font-size:1em !important;
  }
  </code></pre>