Question

我的样式表目录设置如下

stylesheets
    bootstrap.min.css
    style.css

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

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

然而，这并没有在浏览器中被提取。浏览器似乎与bootstrap.min.css中的样式一致。当我将鼠标悬停在预标签块上时，这就是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。

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

2 个答案: