title: Css style priority
body: <p>I am having problems with CSS declaration priority. My page contains an external CSS file with a rule and some inline CSS declarations, which are supposed to override that rule. To my understanding inline style declarations should override external CSS declarations. However, when I view the page in Chrome the second row of the table is displayed blue, when it should be displayed red as defined in the internal style declarations.</p>
  
  <p>What am I missing here  </p>
  
  <p>Here is the HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection"&gt;
      &lt;style type="text/css"&gt;
          td,tr,th
          {
              background: Red;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;11&lt;/td&gt;
              &lt;td&gt;22&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;aa&lt;/td&gt;
              &lt;td&gt;bb&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the content of the CSS file:</p>
  
  <pre class="lang-css prettyprint-override"><code>tbody tr:nth-child(even) td,
  tbody tr.even td
  {
      background: #e5ecf9;
  }
  </code></pre>