Question

＆＃13;

.testfooter > .row > .col-lg-12 > .col-md-3 > .nav nav-pills nav-stacked > a {
  color: white;
}

＆＃13;

<div class="testfooter">
  <br>
  <div style="padding-left:185px;" class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Terms of Use</a>
        </li>
        <li><a href="#">Privacy Policy</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
    </div>
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">Facebook</a>
        </li>
        <li><a href="#">Twitter</a>
        </li>
        <li><a href="#">Linkedin</a>
        </li>
      </ul>
    </div>
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Dentists</a>
        </li>
        <li><a href="#">Dermatologists</a>
        </li>
        <li><a href="#">Gynecologists</a>
        </li>
        <li><a href="#">Orthopedists</a>
        </li>
        <li><a href="#">Pediatricians</a>
        </li>

      </ul>
    </div>
  </div>
</div>

＆＃13;

我试图将页脚中的链接颜色从绿色更改为白色。但出于某种原因，它没有改变颜色。

这是html

<div class="testfooter">
  <br>
  <div style="padding-left:185px;" class="row">
      <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Contact Us</a></li>   
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">Blog</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Linkedin</a></li> 
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">Dentists</a></li>
          <li><a href="#">Dermatologists</a></li>      
          <li><a href="#">Gynecologists</a></li>          
          <li><a href="#">Orthopedists</a></li>          
          <li><a href="#">Pediatricians</a></li>          

        </ul>
      </div>
  </div> 
</div>

这是我尝试使用的CSS

.testfooter > .row > .col-lg-12 > .col-md-3 > .nav nav-pills nav-stacked >  a {
    color: white;
}

Answer 1

错误是由于.col-lg-12和导航片以及导航堆叠应该都是.nav-pills和.nav-stacked这一事实。此外，将其写为：

可能更容易

.testfooter a {
    color: white;
}

希望这有所帮助，祝你好运！

Answer 2

我没有在您的HTML中看到任何类.col-lg-12，因此违反了您的规则。此外，您使用的是Direct Child Selector (>)，因此您还必须拥有所有<li>规则。最后，你不应该在.nav.nav-pills.nav-stacked中有任何空格。

这是一个有效的例子

＆＃13;

.testfooter { background-color: #DDD }
.testfooter > .row > .col-md-3 > .nav.nav-pills.nav-stacked > li > a {
  color: white;
}

＆＃13;

<div class="testfooter">
  <br/>
  <div style="padding-left:185px;" class="row">
      <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Contact Us</a></li>   
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">Blog</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Linkedin</a></li> 
        </ul>
      </div>
      <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#">Dentists</a></li>
          <li><a href="#">Dermatologists</a></li>      
          <li><a href="#">Gynecologists</a></li>          
          <li><a href="#">Orthopedists</a></li>          
          <li><a href="#">Pediatricians</a></li>
        </ul>
      </div>
  </div> 
</div>

＆＃13;

无法将文字颜色更改为白色

2 个答案: