我的CSS被引导CSS覆盖

Question

我想把GWT-Bootstrap添加到我已经开始的项目中。我成功地使用了它，但是引导CSS正在覆盖所有其他CSS。结果是，我以前所有的UI元素都混在一起了。

页边距、文本大小和许多元素不再适合。我不能使用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特异性“关键字。

Answer 2

覆盖样式的工作方式是最后一次加载获胜。

因此，如果您期望中的样式覆盖Bootstrap，那么您将希望对样式表进行排序，如下所示：

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