css - 覆盖引导类属性

Question

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

CSS

Boot strap 
Panel-heading 
{ 
 Color : Red  
}    

Application CSS 
Heading 
{ 
Color : Green 
} 

HTML 页面

链接 Bootstrap
链接应用程序 CSS

问题:仍然是 div 颜色为红色。

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

Answer 1

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

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

改变这个顺序并不重要，重要的是浏览器首先加载哪个 css 文件。

覆盖它的一种方法是使用 !important，这不是一个好的做法。

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

另一种出路是增加自定义类的特异性。

应用程序 CSS

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

这将通过赋予它更高的优先级来增加你的类的特异性，并将覆盖之前的类

您可以在此处阅读有关特异性的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity