html - 我无法更改左侧边栏背景颜色？

Question

我无法在 bootstrap 3 中更改左侧边栏背景颜色。我使用了 !important 但没有任何反应。我使用了 class 或 id 但无法更改左侧边栏的背景颜色。我想更改左侧边栏的背景颜色。我使用了 ID backg 但没有任何反应。请帮我!!!!!!!!!!!!!!! 代码:

body {
  position: relative;
}

ul.nav-pills {
  top: 20px;
  position: fixed;
}

div.col-sm-9 div {
  height: 250px;
  font-size: 28px;
}

.bg-1 {
  background-color: #f1c40f;
}

.bg-1 ul li {
  color: #ecf0f1;
  font-family: 'Gugi', cursive;
  font-size: 20px;
}

.bg-2 {
  width: 82%;
}

.col-sm-3 {
  width: 18% !important;
}

#backg {
  background-color: #16a085 !important;
}

@media screen and (max-width: 810px) {
  #about,
  #education,
  #certifications,
  #skills,
  #projects,
  #experience,
  #interest {
    margin-left: 150px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row bg-1">
    <div class="col-sm-3 text-center" id="backg">
      <nav id="myScrollspy">

        <ul class="nav nav-pills nav-stacked ">
          <img class="img-rounded img-responsive center-block" src="naqqash.png" height="200" width="200">
          <li class="active"><a href="#about">ABOUT</a></li>
          <li><a href="#education">EDUCATION</a></li>
          <li><a href="#certifications">CERTIFICATIONS</a></li>
          <li><a href="#skills">SKILLS</a></li>
          <li><a href="#projects">PROJECTS</a></li>
          <li><a href="#experience">EXPERIENCE</a></li>
          <li><a href="#interest">INTEREST</a></li>
        </ul>
      </nav>

    </div>

    <div class="col-sm-9 bg-2">
      <div id="about">
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="education">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="certifications">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="skills">
        <h1>Section 4</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="projects">
        <h1>Section 5</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="experience">
        <h1>Section 6</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="interest">
        <h1>Section 7</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div>
        <h1>Section 7</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
    </div>
  </div>
</div>

Answer 1

请尝试以下风格

    #backg ul{
      background-color: #16a085 !important;
    }