title: probably css priority bug in chrome?
body: <p>I have a problem with the following code:</p>
  
  <pre><code>#access a, #access a:visited {
  line-height: 2em;                 //&lt;- Chrome uses these
  padding: 0 1em;
  }
  #access ul ul a {
  line-height: 1em;                 //&lt;- Firefox uses these
  padding: .5em .5em .5em 1em;
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;nav role="navigation" id="access"&gt;
  [...]
    &lt;div [...]&gt;
      &lt;ul [...]&gt;
        &lt;li [...]&gt; [...] &lt;/li&gt;
        &lt;li [...]&gt; [...]
          &lt;ul class="sub-menu"&gt;
            &lt;li [...]&gt; [...] &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;    
  &lt;/nav&gt;
  </code></pre>
  
  <p>Which selector has the higher priority?</p>
  
  <pre><code>#access a, #access a:visited
  </code></pre>
  
  <p>or</p>
  
  <pre><code>#access ul ul a   &lt;- Is supposed to have the higher priority
  </code></pre>
  
  <p>one of the two browsers (Firefox or Chrome) seems to interpret them wrong</p>
  
  <p>an easy fix was to give the second selector a classname</p>
  
  <pre><code>-&gt; #access ul ul.sub-menu a  &lt;- works for both
  </code></pre>
  
  <p>if this can considered to be a bug then I will report it to Mozilla/Google</p>
  
  <p>EDIT: two pictures of Fiddle (1 in Chrome and 1 in Firefox):
  Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/YfZ9Q.png" alt="enter image description here"></p>
  
  <p>Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/YfZ9Q.png" alt="enter image description here"></p>