自定义css无法覆盖bootstrap css

Question

我的自定义CSS中有一些样式来覆盖bootstrap CSS，但似乎它们无法覆盖bootstrap CSS。当我使用chrome developer模式检查样式时，我只能看到正在应用的引导样式！ 以下是我的chrome bootstrap的屏幕截图：

以下是我在css中的内容：

.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border: 10px solid #b03636;


}
.panel-heading {
    padding: 10px 15px !important;
    border: 10px solid transparent !important;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
}

我错过了什么吗？ 谢谢，

Answer 1

首先要检查一件事：浏览所有样式，看看是否找到了自定义CSS中的样式。如果是这样的话，他们可能会被划掉，暗示他们被引导风格覆盖了。如果不是这样，那就意味着由于某种原因，它根本找不到你的风格，而这就是问题所在。

如果它们肯定被覆盖，我可能还建议确保在引导程序文件之后调用自定义CSS 。

Answer 2

我认为问题是您的 css 文件已正确关联或未与 HTML 页面完全关联。你应该先检查一下

Answer 3

首先确保在Bootstrap CSS文件之后加载自定义CSS，如果它没有用，请使用！important属性和自定义CSS来强制覆盖。

Answer 4

将您的CSS文件正确链接到HTML，然后在引导CSS后导入，如下所示，这样一来，您无需编写！important 就可以在一夜之间完成所有事情。

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">