title: Confusing CSS rules precedence
body: <p>I have this (simplified) markup:</p>
  
  <pre><code>&lt;ul id="topnav"&gt;
      &lt;li&gt;one&lt;/li&gt;
      &lt;li&gt;two&lt;/li&gt;
      &lt;li id="last-nav"&gt;last&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and these CSS rules:</p>
  
  <pre><code>#topnav li {
    list-style-type: none;
    float: left;
  }
  
  #last-nav {
      float: right;
  }
  </code></pre>
  
  <p>To my surprise, the second rule is overruled by the first one. If I change the selector to <code>li#last-nav</code>, it works. Why is that?</p>
  
  <p>(Disclaimer: I only tested this in Firefox)</p>