我的 CSS 被 Bootstrap CSS 覆盖答案

【问题标题】：My CSS are overridden by Bootstrap CSS我的 CSS 被 Bootstrap CSS 覆盖
【发布时间】：2017-01-23 00:34:35
【问题描述】：

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

边距、文本大小和许多元素都不再适合了。我不能使用 Bootstrap，因为项目的所有其余部分都不可用。我想对 Bootstrap 进行渐进式更改并保持旧的东西不变。

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

我的应用程序
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" />

我能做什么？

【问题讨论】：

同样的问题：stackoverflow.com/questions/17313196/…

标签： css gwt twitter-bootstrap gwt-bootstrap

【解决方案1】：

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

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

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

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

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

Read more 用“CSS 特异性”关键字来讨论它。

【讨论】：

【解决方案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" />

【讨论】：