title: CSS Rule Priorities
body: <p>Given the following mark-up...</p>
  
  <pre><code>&lt;div id="Header"&gt;
       &lt;a href="#" class="Highlight"&gt;foo&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following stylesheet...</p>
  
  <pre><code>/******************Exceptions******************/
  #Footer, #Header,
  #Footer a, #Header a { color: #f8f8f8; }
  
  
  /******************Classes******************/
  .Highlight, a.Highlight { color: #B1D355; }
  .Notification, a.Notification { color: Red; }
  </code></pre>
  
  <p><strong>Why is my link still off-white (F8F8F8) rather than green (B1D355)?</strong></p>
  
  <p>Shouldn't using the class <em>Highlight</em> override the color settings for <em>Header</em> and <em>Footer</em> since it comes after their declarations?</p>