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 中的高度是什么被改变了。当我将它移到前两个下方时，它会按预期工作而不会引起任何问题。所以这个

.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">

我只是不明白一个与其他两个完全无关的类怎么能如此彻底地改变事情。我知道 CSS 级联样式，但在这种情况下它没有意义，因为它们不相关。我应该提一下，这是 Twitter Bootstrap，它位于现有 CSS 之上。我希望有人能阐明为什么会这样。

Answer 1

样式表中类的顺序(但不是 HTML 中的顺序)很重要，因为样式表是从上到下阅读的。如果您按此顺序有两个类:

.a { color: blue; }
.b { color: red; }

这两个元素 will be red :

<div class="a b">Test 1</div>
<div class="b a">Test 2</div>

但是如果你交换它们，both will be blue :

.b { color: red; }
.a { color: blue; }