我的CSS被Bootstrap CSS覆盖

Question

我想将GWT-Bootstrap添加到我已经启动的项目中.我设法使用它,但Bootstrap CSS覆盖了所有其他CSS.结果是我之前的所有UI元素都混淆了.

边距,文本大小和许多元素不再适合.我无法使用Bootstrap,因为项目的其余部分都无法使用.我想对Bootstrap进行渐进式更改,并保留旧的东西.

我希望我的CSS按此优先顺序排列:

• MyApp的
• GWT
• 引导

我尝试在我的*.gwt.xml中订购它们但没有成功:

<stylesheet src="css/gwt-bootstrap.css" />
<stylesheet src="css/bootstrap.min.css" />
<stylesheet src="gwt/clean/clean.css" />
<stylesheet src="MyApp.css" />

我能做什么？

Answer 1

使用样式的优先级由更复杂的算法驱动,而不仅仅是HTML中包含的顺序.使用最具体的选择规则选择CSS样式,其中内联规则被认为更具体,然后外部附加,然后按ID选择,然后选择类和带有标记名称的结束选择.例如,段落<p id="xyz" class="xyz">将是红色,与规则的顺序无关:

.xyz {
  color: blue;
}
#xyz {
  color: red;
}

如果有两个具有相同选择类型的规则,则该数字很重要.因此,选择.xyz .abc"更强" .qwerty.

如果两个规则在每个类别中的数字方面具有相同的选择,那么,最终的顺序将被考虑在内......

您还可以使用该!important指令强制执行不同的顺序.

使用"CSS特性"关键字了解更多相关信息.