なぜ私の<tfoot>ボーダーカラーは私の<tbody>ボーダーカラーをオーバーライドしませんか？

Question

<table id="tab"> 
    <thead><tr><td>hhh</td><td>hhh</td></tr></thead> 
    <tbody><tr><td>aaa</td><td>aaa</td></tr></tbody> 
    <tfoot class="foot"><tr class="foot"><td class="foot">fff</td><td>fff</td></tr></tfoot> 
</table> 

#tab tr td { 
    border: solid 2px green; 
} 

.foot { 
    border: solid 2px red !important; 
} 

なぜ私の<tfoot>ボーダーカラーは、<tbody>ボーダーカラーよりも優先されませんか？私はまた、ボーダートップの色を<tfoot>赤にしたいと思います。

LIVE例：このようなhttp://jsfiddle.net/S8tUW/1/

Answer 1

ああ。ボーダーが崩壊したときにどのボーダースタイルを適用するかを決めるルールは少し複雑です。 CSS: The Definitive Guide by Eric Meyerは私が知っている最良の説明を持っています。あなたが実際にあなたの<tbody>のテーブルセルの下の境界線のスタイルを削除する必要があなたの<tfoot>赤のセルの上部の境界線を作るために

：

#tab tr td { 
    border: solid 2px green; 
} 

#tab tfoot tr td { 
    border-color: red; 
} 

#tab tbody tr td { 
    border-bottom-style: none; 
} 

（http://jsfiddle.net/pauldwaite/S8tUW/28/を参照）

Answer 2

書き込み：

.foot tr td{ 
    border: solid 2px red !important; 
} 

#tab tbody tr td{ 
    border-bottom:0; 
} 

チェックこのhttp://jsfiddle.net/sandeep/S8tUW/19/

Answer 3

緑色の枠がセルに適用されるが、赤枠がセクションに適用されます（tfoot）。スタイルを.footから.foot tdに変更すると、より効果的です。

Answer 4

セレクターの特異性のためです。

セレクタは、.footよりも具体的です。

セレクターを.foot tr tdに変更してください。

Demo here。

Answer 5

jsFiddleはnormalize.cssを使用するのがデフォルトです（厄介なことに反します）。これは逆説的に振る舞います。セレクタの特異性を増やしても、 "win"という境界はありません。

（jsFiddleの "Normalized CSS"を無効にする）を使用することをお勧めします。隣接する罫線が同じスタイル（つまり重複している）になるようにCSSをコーディングしてから、 "border-collapse （これは本質的にPaul D. Waiteの解決策であり、今私の仕事のコードに適用しなければならないだろう）私が思いついたこの問題に対する解決策は、過度に冗長であるhttp://jsfiddle.net/Eywjf/1/である。