我想将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特异性”关键字.