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指令强制执行不同的顺序。

Read more关于“CSS特异性”关键字。

Answer 2

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

因此，如果您希望GWT-Bootstrap中的样式覆盖Bootstrap CSS，那么您需要订购更像这样的样式表顺序：

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

我的CSS被Bootstrap CSS覆盖

2 个答案: