Question

我们正在使用bootstrap，想要覆盖其中一个bootstrap类属性，如下所示。我正在使用Asp.net MVC。

CSS

Boot strap 
Panel-heading 
{ 
 Color : Red  
}    

Application CSS 
Heading 
{ 
Color : Green 
}

HTML页面

Link Bootstrap
链接应用程序CSS

问题：仍然div颜色为红色。

有些人可以帮助我如何在不使用！的情况下覆盖boorstrap类的颜色。

Answer 1

这种情况正在发生，因为当你的应用程序加载时，你首先加载bootstrap文件然后加载你的应用程序css文件，这实际上是加载它的正确方法。但根据css规则，如果在具有相同样式的元素上应用两个类，则浏览器将选择它首先找到的那个。它不取决于您在元素上应用它的顺序，这意味着

<div class = "Panel-heading Heading"></div>
<div class = "Heading Panel-heading"></div>

更改此顺序并不重要，重要的是首先在浏览器中加载哪个css文件。

覆盖它的一种方法是使用！important，这不是一个好习惯。

在您的应用程序中使用同名的类也不是一个优雅的解决方案，因为在您的应用程序上工作的新开发人员可能会感到困惑，因为他不希望本机引导类以不同的方式工作。

另一种方法是增加自定义类的特异性。

应用程序CSS

div.Panel-Heading.Heading { Color : Green }

这将通过赋予其更多优先级来增加您的类的特异性，并将覆盖前一个类