html - 背景颜色未显示在页脚中

Question

我使用 Bootstrap 4 重新制作了一个页面，似乎无法弄清楚为什么没有显示页脚背景色。 The page is up here

.footer {
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  overflow: visible;
  color: #004289;
  font-weight: bold;
  height: 2rem;
  background-color: #CFFEEE;
}	

<footer class="footer">
<div class="container">
<div class="text-center">Copyright &copy; <script>document.write(new Date().getFullYear());</script> The Driftwood</div>
</div>
</footer>

我想我的大脑正在为应该如此简单的事情而爆炸。谢谢编辑:在下面的运行代码片段管理器中显示我想要的方式。如果您需要更多代码，请询问或查看实时页面。这就是我所看到的

在 head 部分，我链接到 BS css 和我的自定义 css，就像这样

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="dist/css/custom-bs4.css" rel="stylesheet">

Answer 1

你的 .container 白色背景覆盖了它，因为它是一个比 .footer 更具体的选择器。

要覆盖你可以这样做:

.footer .container {
  background-color: #CFFEEE;
}