css - CSS クラスを他のクラスの上に配置すると、他の無関係なクラスが完全に変更されるのはなぜですか?

Question

だから私は次の上部にありますbootstrap.css

.scrollable-table {  
    height: 800px;
    overflow: scroll;
}​

.top-buffer { margin-top:20px; height:150px;}

.cat-title { background-color:gray; margin-top:0px; }

scrollable-table必要なことをしながら、他のHTMLの外観を変更します。具体的には、高さから何.top-bufferが変更されているかがわかります。最初の 2 つの下に移動すると、問題なく期待どおりに動作します。したがって、この

.top-buffer { margin-top:20px; height:150px;}

.cat-title { background-color:gray; margin-top:0px; }
.scrollable-table {  
    height: 800px;
    overflow: scroll;
}​

使うところscrollable-tableはここ

<div class="span4 scrollable-table" style="background-color:white">

scrollable-tableもそこでのみ使用されます。

適切な測定のために、top-bufferが使用されている場所も示します

<div class="span3 top-buffer" style="background-color:#DBDBDB">

他の2つとはまったく関係のないクラスがどのように物事を劇的に変えることができるのか理解できません. CSS がスタイルをカスケードすることは理解していますが、この場合は関連していないため意味がありません。これは Twitter Bootstrap であり、すでに存在していた CSS の最上位にあることを言及しておく必要があります。誰かがこれの理由を明らかにしてくれることを願っています。