我的CSS被Bootstrap CSS覆盖

前端之家收集整理的这篇文章主要介绍了我的CSS被Bootstrap CSS覆盖前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想将GWT-Bootstrap添加到我已经启动的项目中.我设法使用它,但Bootstrap CSS覆盖了所有其他CSS.结果是我之前的所有UI元素都混淆了.

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

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

> MyApp
> GWT
> Bootstrap

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

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

我能做什么?

解决方法

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

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

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

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

Read more关于它与“CSS特异性”关键字.

猜你在找的CSS相关文章