Question

在报价生成器网站上工作。我添加了bootstrap，在css代码中，我有一个部分，我将HTML元素的背景颜色设置为蓝绿混合色调。 bootstrap只是决定覆盖CSS代码并将内容背景颜色的页面部分设置为白色。为什么以及如何将背景颜色保持为我想要的颜色

html {
	background-color: #33cccc;
}

#header, #paragraph {
	font-family: sans-serif;
	
}

#header {
	padding-top: 10%;
	font-size: 60px;
}

#paragraph {
	padding-left: 80%;
	font-size: 20px;
}

<!DOCTYPE html>
<html>
<head>
    <title>Random Quote Generator</title>
    <script src = "script.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<div class = "container">
    <h1 id="header">Click the button to generate a quote!</h1>
	<p id="paragraph"></p>
	<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
	</div>
</body>
</html>

The browser (or proxy) sent a request that this server could not understand.

Answer 1

选项1：确保您的css已经 > bootstrap.css文件。

var quotes = [
    [
        "To be prepared for war is one of the most effectual means of preserving peace.",
        "George Washington"
    ],
    [
        "One man with courage is a majority.",
        "Thomas Jefferson"
    ],
    [
        "National honor is a national property of the highest value.",
        "James Monroe"
    ],
    [
        "The only thing we have to fear is fear itself.",
        "Theodore D. Roosevelt"
    ],
    [
        "Ask not what your country can do for you, but what you can do for your country.",
        "John F. Kennedy"
    ]
    
];
var currentQuote = 0;
function showNewQuote() {
	if (currentQuote >= 5) {
		currentQuote = 0;	
	}
	var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
	document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
	document.getElementById("paragraph").innerHTML = Quote[1];
	currentQuote++;
}

<script src = "script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
	background-color: #33cccc;
}

#header, #paragraph {
	font-family: sans-serif;
	
}

#header {
	padding-top: 10%;
	font-size: 60px;
}

#paragraph {
	padding-left: 80%;
	font-size: 20px;
}
  </style>
<body>
	<div class = "container">
    <h1 id="header">Click the button to generate a quote!</h1>
	<p id="paragraph"></p>
	<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
	</div>
</body>
</html>

选项2：使用!important关键字：

var quotes = [
    [
        "To be prepared for war is one of the most effectual means of preserving peace.",
        "George Washington"
    ],
    [
        "One man with courage is a majority.",
        "Thomas Jefferson"
    ],
    [
        "National honor is a national property of the highest value.",
        "James Monroe"
    ],
    [
        "The only thing we have to fear is fear itself.",
        "Theodore D. Roosevelt"
    ],
    [
        "Ask not what your country can do for you, but what you can do for your country.",
        "John F. Kennedy"
    ]
    
];
var currentQuote = 0;
function showNewQuote() {
	if (currentQuote >= 5) {
		currentQuote = 0;	
	}
	var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
	document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
	document.getElementById("paragraph").innerHTML = Quote[1];
	currentQuote++;
}

body {
	background-color: #33cccc !important;
}

#header, #paragraph {
	font-family: sans-serif;
	
}

#header {
	padding-top: 10%;
	font-size: 60px;
}

#paragraph {
	padding-left: 80%;
	font-size: 20px;
}

<!DOCTYPE html>
<html>
<head>
    <title>Random Quote Generator</title>
    <script src = "script.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<div class = "container">
    <h1 id="header">Click the button to generate a quote!</h1>
	<p id="paragraph"></p>
	<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
	</div>
</body>
</html>

（请注意，我在您的css中也从html更改为body

Answer 2

如上所述首先加载bootstrap然后你的css。而不是使用！important，你可以使用你的浏览器dev-tools（我推荐Chromes）并寻找bootstraps背景颜色的选择器。它的特殊性在很多时候都非常隐蔽，你必须为你的风格添加更高的特异性。

阅读MDN上的这篇文章了解更多信息： MDN CSS Specificity

Bootstrap改变背景颜色

2 个答案: