текст не отвечает на CSS - PullRequest
Новая
       15

текст не отвечает на CSS

0 голосов
/ 12 июня 2018

Я пытаюсь изменить цвет кнопок navbar с помощью «белого» класса, но по какой-то причине они не реагируют на мой 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>

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Причиной этого являются теги <a>.У вас есть три варианта сделать это:

  1. добавление белого класса к тегам <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.

0 голосов
/ 12 июня 2018

вам нужно настроить таргетинг на ссылки a, чтобы переопределить цвет по умолчанию, установленный браузером: 

.white a {
  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>
...