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; }

为什么将CSS类放在其他类上面会完全改变其他不相关的类？

1 个答案: