css priority when nesting: outer class higher than inner?
<p>I am no expert in CSS, so the following confuses me. My basic understanding of CSS priority is that the more specific a declaration is, the higher is it's priority. </p>

<p>With that I thought that both links should have the same color, as in both cases the inner most element has the class <code>.inner</code>. But in my tests with both firefox and chrome(based), on the first link the rule for <code>a</code> descended of <code>.container</code> is applied.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container a{
  color: green;
}
.inner {
  color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;a href="google.com" class="inner"&gt;first&lt;/a&gt;
    &lt;a href="google.com" &gt;&lt;span class="inner"&gt;second&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I can solve my issue with the workaround I used for the second link, but I would be happier if I could understand what is going on ;)</p>