Custom css overridden by Bootstrap in browser

问题

I have my stylesheet directory set up like this

stylesheets
    bootstrap.min.css
    style.css

In my style.css, I want to edit the pre tag like this:

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

However, this is not getting picked up in the browser. It seems like the browser is going with the styles in bootstrap.min.css. This is what it looks like in Chrome's inspector tools when I hover over the block of pre tag:

So how do I get it to use my custom css instead?

回答1:

You have to make sure you include your custom CSS after the Bootstrap CSS, like the following:

<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>