0

所以我在顶部有以下内容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 已经存在的最上面。我希望有人能解释一下为什么会这样。

4

1 回答 1

1

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

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

这两个元素都是红色的：

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

但是如果你交换它们，两者都是蓝色的：

.b { color: red; }
.a { color: blue; }
于 2013-04-02T02:44:40.593 回答