浏览器中的自定义 css 被 Bootstrap 覆盖

Question

我的样式表目录是这样设置的

stylesheets
    bootstrap.min.css
    style.css

在我的 style.css 中，我想像这样编辑 pre 标签：

pre {
    background-color: #d9edf7;
    border: #d9edf7;
    color: navy;
}

但是，这不会在浏览器中被拾取。浏览器似乎正在使用 bootstrap.min.css 中的样式。这是当我将鼠标悬停在 pre 标记块上时 Chrome 的检查器工具中的样子：

那么如何让它使用我的自定义 css 呢？

Answer 1

您必须确保在 Bootstrap CSS 之后包含您的自定义 CSS，如下所示：

<head>
    <!-- don't include your custom CSS here! -->
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="custom.css">
    <style>
        pre {
            background-color: #d9edf7;
            border: #d9edf7;
            color: navy;
        }
    </style>
</head>

Answer 2

将 style.css 放在 bootstrap.min.css 之后，因此 style 会覆盖 bootstrap.

浏览器中的自定义 css 被 Bootstrap 覆盖

Custom css overridden by Bootstrap in browser

html

css

google-chrome

stylesheet

twitter-bootstrap