title: Why does my <tfoot> border color not override my <tbody> border color?
body: <pre><code>&lt;table id="tab"&gt;
      &lt;thead&gt;&lt;tr&gt;&lt;td&gt;hhh&lt;/td&gt;&lt;td&gt;hhh&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;
      &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;td&gt;aaa&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
      &lt;tfoot class="foot"&gt;&lt;tr class="foot"&gt;&lt;td class="foot"&gt;fff&lt;/td&gt;&lt;td&gt;fff&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;
  &lt;/table&gt;
  
  #tab tr td {
      border: solid 2px green;
  }
  
  .foot {
      border: solid 2px red !important;
  }
  </code></pre>
  
  <p>Why does my <code>&lt;tfoot&gt;</code> border color not override the <code>&lt;tbody&gt;</code> border color? I would also like to make the border-top color in <code>&lt;tfoot&gt;</code> red.</p>
  
  <p><strong>LIVE EXAMPLE:</strong> <a href="http://jsfiddle.net/S8tUW/1/" rel="nofollow">http://jsfiddle.net/S8tUW/1/</a></p>