Question

我正在尝试使用“白色”类更改导航栏按钮的颜色，但由于某种原因，它们对我的CSS没有反应。第一个html片段是没有响应的片段，第二个是它工作正常的地方。

.white {
	color: #aaaeb5;
}

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

		      	  <ul class="nav navbar-nav navbar-right">
		        	<li class="white"><a href="#About">About</a></li>
		        	<li class="white"><a href="#Who We Are">Who We Are</a></li>
		        	<li class="white"><a href="#Services">Services</a></li>

		      	  </ul>
              
              
              <div class="container-fluid">
	<div class="row">
		<footer class="footer">
			<h3 class="white col-sm-12 text-center">Palacios Beauty Salon</h3>
			<a href="https://www.google.com/maps/place/290+Broadway,+Brooklyn,+NY+11211/@40.7083862,-73.9605364,17z/data=!3m1!4b1!4m5!3m4!1s0x89c25be0961830a5:0xc6f496d3baa1bd27!8m2!3d40.7083862!4d-73.9583477"><h5 class="white col-sm-12 text-center"><i class="fa fa-building white padding" aria-hidden="true"></i>290 Broadway, Brooklyn, 11211</h5></a>
			<h5 class="white col-sm-12 text-center"><i class="fa fa-phone white padding" aria-hidden="true"></i>(718) 123-4567</h5>
			<h5 class="white col-sm-12 text-center"><i class="fa fa-envelope-o white padding" aria-hidden="true"></i>Palaciossalon@gmail.com</h5>
			
	</div>
</div>

Answer 1

您需要定位链接a以覆盖浏览器设置的默认颜色：

＆＃13;

.white a {
  color: #aaaeb5;
}

＆＃13;

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <ul class="nav navbar-nav navbar-right">
    <li class="white"><a href="#About">About</a></li>
    <li class="white"><a href="#Who We Are">Who We Are</a></li>
    <li class="white"><a href="#Services">Services</a></li>

  </ul>


  <div class="container-fluid">
    <div class="row">
      <footer class="footer">
        <h3 class="white col-sm-12 text-center">Palacios Beauty Salon</h3>
        <a href="https://www.google.com/maps/place/290+Broadway,+Brooklyn,+NY+11211/@40.7083862,-73.9605364,17z/data=!3m1!4b1!4m5!3m4!1s0x89c25be0961830a5:0xc6f496d3baa1bd27!8m2!3d40.7083862!4d-73.9583477">
          <h5 class="white col-sm-12 text-center"><i class="fa fa-building white padding" aria-hidden="true"></i>290 Broadway, Brooklyn, 11211</h5>
        </a>
        <h5 class="white col-sm-12 text-center"><i class="fa fa-phone white padding" aria-hidden="true"></i>(718) 123-4567</h5>
        <h5 class="white col-sm-12 text-center"><i class="fa fa-envelope-o white padding" aria-hidden="true"></i>Palaciossalon@gmail.com</h5>

    </div>
  </div>

＆＃13;

Answer 2

这背后的原因是<a>标签。您有三种选择：

将类white添加到<a>标记，而不是父<li>标记：

<ul class="nav navbar-nav navbar-right">
<li><a class="white" href="#About">About</a></li>
<li><a class="white" href="#Who We Are">Who We Are</a></li>
<li><a class="white" href="#Services">Services</a></li>
</ul>

将!important添加到您的CSS：

.white {
color: #aaaeb5 !important;
}

将.white a添加到您的CSS：

.white, .white a {
color: #aaaeb5;
}

我建议选项＃1。

文字对css没有反应

2 个答案: