我正在通过引用 codepen 上的这段代码制作一个 javascript 计算器问题是 body 背景颜色设置为黑色，但为什么它仍然是白色。有间距问题吗？到目前为止，我还没有经历过这种行为 :( 我怎样才能摆脱这个问题。在此先感谢...
html, body{
background-color:black;
}
#calcOutput{
width:250px;
height:75px;
border-top-left-radius:2em;
border-top-right-radius:2em;
margin-right:auto;
margin-left:auto;
margin-top:20px;
padding-top:20px;
}
#calculator{
background-color:grey;
width:250px;
padding-top: 20px;
padding-bottom: 30px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
margin-right:auto;
margin-left:auto;
}
#steps{
padding-left:50px;
font-size:2em;
}
.bigButton{
width:93px;
}
a{
margin: 5px;
width: 2.6vw;
height: 2.6vw;
}
<head>
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Calculator</h1>
<h2>JS calculator</h2>
</div>
<div id ="calcOutput">
<span id= "steps">0</span>
<hr/>
</div>
<div class="text-center" id="calculator">
<a class="btn btn-danger" id="deleteAll">AC</a>
<a class="btn btn-danger" id="backOne">CE</a>
<a class="btn btn-primary" id="/">/</a>
<a class="btn btn-primary" id="*">*</a>
<br/>
<a class="btn btn-primary" id="7">7</a>
<a class="btn btn-primary" id="8">8</a>
<a class="btn btn-primary" id="9">9</a>
<a class="btn btn-primary" id="-">-</a>
<br/>
<a class="btn btn-primary" id="4">4</a>
<a class="btn btn-primary" id="5">5</a>
<a class="btn btn-primary" id="6">6</a>
<a class="btn btn-primary" id="+">+</a>
<br/>
<a class="btn btn-primary" id="1">1</a>
<a class="btn btn-primary" id="2">2</a>
<a class="btn btn-primary" id="3">3</a>
<a class="btn btn-primary" id=".">.</a>
<br/>
<a class ="btn btn-primary bigButton" id="0">0</a>
<a class ="btn btn-primary bigButton" id="total">=</a>
</div>
</body>
</html>最佳答案
因为您使用的是 bootstrap，它的主体背景值为白色，在这种情况下您有两个选择:
第一个选项
使用 !important
html, body{
background-color:black !important;
}
#calcOutput{
width:250px;
height:75px;
border-top-left-radius:2em;
border-top-right-radius:2em;
margin-right:auto;
margin-left:auto;
margin-top:20px;
padding-top:20px;
}
#calculator{
background-color:grey;
width:250px;
padding-top: 20px;
padding-bottom: 30px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
margin-right:auto;
margin-left:auto;
}
#steps{
padding-left:50px;
font-size:2em;
}
.bigButton{
width:93px;
}
a{
margin: 5px;
width: 2.6vw;
height: 2.6vw;
}
<head>
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Calculator</h1>
<h2>JS calculator</h2>
</div>
<div id ="calcOutput">
<span id= "steps">0</span>
<hr/>
</div>
<div class="text-center" id="calculator">
<a class="btn btn-danger" id="deleteAll">AC</a>
<a class="btn btn-danger" id="backOne">CE</a>
<a class="btn btn-primary" id="/">/</a>
<a class="btn btn-primary" id="*">*</a>
<br/>
<a class="btn btn-primary" id="7">7</a>
<a class="btn btn-primary" id="8">8</a>
<a class="btn btn-primary" id="9">9</a>
<a class="btn btn-primary" id="-">-</a>
<br/>
<a class="btn btn-primary" id="4">4</a>
<a class="btn btn-primary" id="5">5</a>
<a class="btn btn-primary" id="6">6</a>
<a class="btn btn-primary" id="+">+</a>
<br/>
<a class="btn btn-primary" id="1">1</a>
<a class="btn btn-primary" id="2">2</a>
<a class="btn btn-primary" id="3">3</a>
<a class="btn btn-primary" id=".">.</a>
<br/>
<a class ="btn btn-primary bigButton" id="0">0</a>
<a class ="btn btn-primary bigButton" id="total">=</a>
</div>
</body>
</html>第二个选项
在您的 html 页面中，将自定义的 css 引用放在 Bootstrap css 引用下方，这样您的自定义 css 就可以覆盖 Bootstrap css。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/your/customized/style.css">
关于html - 为什么 body 背景颜色没有改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47495749/