无法更改类“菜单”的背景颜色答案

【问题标题】：Can't change background-color of class "menu"无法更改类“菜单”的背景颜色
【发布时间】：2018-10-09 00:17:41
【问题描述】：

我想改变“菜单”类的颜色，但我不知道为什么当我像下面这样在 css 上调用“菜单”类时，它没有改变。你能建议我一个更好的 CSS 重置或任何其他解决方案吗？

.menu{
 background-color: black;}


<div class="menu">
<div class="container">
  <nav class="navbar navbar-expand offset-3 fixed-top">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
       <span class="navbar-toggler-icon"></span>
     </button>
    <div class="collapse navbar-collapse" id ="collapse-menu">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#gioithieu">ABOUT</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">CONTACT</a> 
        </li>
      </ul>
    </div>
  </nav>
</div>

【问题讨论】：

分享完整代码，你可能会涉及到更多的CSS
背景颜色属性可能已经在“容器”类或导航中设置。在你的 CSS 中检查。
不能，因为我下面有很多类“容器”。我尝试添加 id 嵌套 div 但是当我在 css 上调用这个 id 时，它不会改变。

标签： html css bootstrap-4 frontend background-color

【解决方案1】：

当.menu 折叠并且高度和宽度为零时，您的背景不会显示。发生这种情况是因为孩子有一个position: fixed 并退出了父线程。您还可以使用 Bootstrap 4 类来定义background-color。

<div class="menu fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand offset-3">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
           <span class="navbar-toggler-icon"></span>
         </button>
        <div class="collapse navbar-collapse" id="collapse-menu">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="#gioithieu">ABOUT</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">CONTACT</a> 
            </li>
          </ul>
        </div>
      </nav>
    </div>
</div>

https://www.codeply.com/go/jEbcp1KvQW

【讨论】：

【解决方案2】：

尝试像这样使用 !important

<style>
    .menu
    {
     background-color: black!important;
    }
</style>

【讨论】：

还是改不了
您可以在这里做的最好的事情是尝试 ctlrl + shift + 我单击“元素”并搜索 class="menu" 然后检查样式是否有一些 CSS 覆盖了您的样式。并删除它。

【解决方案3】：

试试这个：

<style>
.menu{
 background-color: black !important;
}
</style>

【讨论】：

还是改不了。
如果您只想更改导航栏颜色，请尝试此操作.navbar { background-color: #F8F8F8; border-color: #E7E7E7; }
PS：在引导 css 之后添加自定义 css，否则它将覆盖。
但是类“导航栏”嵌套类“容器”。我觉得没用。
不要将导航添加到容器中。