6

I want to add GWT-Bootstrap to my already-started project. I managed to use it, but the Bootstrap CSS is overriding every other CSS. The result is that all my previous UI elements are mixed up.

The margin, the text size, and a lot of elements don't fit any more. I can't use Bootstrap because all the rest of the project is unusable. I would like to do a progressive change to Bootstrap and keep the old stuff like it is.

I would like to have my CSSs in this priority order:

  • MyApp
  • GWT
  • Bootstrap

I tried to order them in my *.gwt.xml without success:

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

What can I do?

4

2 回答 2

6

使用样式的优先级是由更复杂的算法驱动的，而不仅仅是包含在 HTML 中的顺序。使用最具体的选择规则选择 CSS 样式，其中内联规则被认为更具体，然后是外部附加，然后按 ID 选择，然后是类，最后选择带有标签名称。例如，段落<p id="xyz" class="xyz">将独立于规则顺序变为红色：

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

如果有两个规则具有相同的选择类型，则数量很重要。因此，选择.xyz .abc“更强” .qwerty。

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

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

使用“CSS 特异性”关键字阅读更多相关信息。

于 2013-07-11T10:44:07.210 回答
0

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

因此，如果您希望 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" />
于 2013-07-10T21:58:51.060 回答