Bootstrap Nav Цвет шрифта не изменится

Question

My HTML Nav:

<nav class="navbar navbar-default navbar-fixed-top navbar-custom"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="nav navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#home">Treasures Reading</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Early Childhood <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#early_childhood_little_treasures">Little Treasures</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kindergarten <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#kindergarten_big_books">Big Books</a></li> 
         <li><a href="#kindergarten_decodable_books">Decodable Books</a></li> 
         <li><a href="#kindergarten_a">A</a></li> 
         <li><a href="#kindergarten_o">O</a></li> 
         <li><a href="#kindergarten_b">B</a></li> 
         <li><a href="#kindergarten_trade_books">Trade Books</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">1st Grade <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#first_grade_anthology">Anthology</a></li> 
         <li><a href="#first_grade_big_books">Big Books</a></li> 
         <li><a href="#first_grade_decodable_books">Decodable Books</a></li> 
         <li><a href="#first_grade_a">A</a></li> 
         <li><a href="#first_grade_o">O</a></li> 
         <li><a href="#first_grade_b">B</a></li> 
         <li><a href="#first_grade_trade_books">Trade Books</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2nd Grade <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#second_grade_anthology">Anthology</a></li> 
         <li><a href="#second_grade_decodable_books">Decodable Books</a></li> 
         <li><a href="#second_grade_a">A</a></li> 
         <li><a href="#second_grade_o">O</a></li> 
         <li><a href="#second_grade_b">B</a></li> 
         <li><a href="#second_grade_trade_books">Trade Books</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3rd Grade <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#third_grade_anthology">Anthology</a></li> 
         <li><a href="#third_grade_a">A</a></li> 
         <li><a href="#third_grade_o">O</a></li> 
         <li><a href="#third_grade_b">B</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">4th Grade <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#fourth_grade_anthology">Anthology</a></li> 
         <li><a href="#fourth_grade_a">A</a></li> 
         <li><a href="#fourth_grade_o">O</a></li> 
         <li><a href="#fourth_grade_b">B</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">5th Grade <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#fifth_grade_anthology">Anthology</a></li> 
         <li><a href="#fifth_grade_a">A</a></li> 
         <li><a href="#fifth_grade_o">O</a></li> 
         <li><a href="#fifth_grade_b">B</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">6th Grade <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#sixth_grade_anthology">Anthology</a></li> 
         <li><a href="#sixth_grade_a">A</a></li> 
         <li><a href="#sixth_grade_o">O</a></li> 
         <li><a href="#sixth_grade_b">B</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Я добавил свой собственный лист стилей CSS, чтобы переопределить самозагрузки как и в <head>:

<link href="css/bootstrap.min.css" rel="stylesheet" /> 
<link href="css/styles.css" rel="stylesheet" /> 

Моя таблица стилей выглядит следующим образом :

html { 
    min-height:100%; 
} 
body { 
    padding-top: 70px; 
    height: 100%; 
    background: #E0EAFC; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to bottom, #91bef8, #E0EAFC); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to bottom, #91bef8, #E0EAFC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#E0EAFC'); 
} 

.navbar-custom{ 
    border-width: 2px; 
    border-bottom-width:4px; 
    border-bottom-color:White; 
    border-bottom-style: solid; 
    background: #E0EAFC; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to bottom, #91bef8, #002f6c); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to bottom, #91bef8, #002f6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#002f6c'); 
} 

.nav { 
    background: #E0EAFC; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to bottom, #91bef8, #002f6c); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to bottom, #91bef8, #002f6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#002f6c'; 
} 

.nav .navbar-nav>li>a { 

    color: #FFFFFF; 
} 

Как вы можете видеть - просто пытайтесь отобразить шрифт в простом белом цвете.

Остальные выборы удерживаются соответствующим образом, но последний селектор не применяет соответствующий цвет шрифта.

Я пробовал всевозможные изменения, но я не могу заставить его меняться!

Answer 1

Во-первых, ваш CSS является недействительным, поскольку в селекторе .nav для стиля filter вам не хватает ) в конце значения.

Во-вторых, вы хотите изменить цвет заголовка Treasures Reading? Тогда этот код будет сделать это:

.nav.navbar-header a { 
    color: #FFFFFF; 
} 

Answer 2

Попробуйте использовать .nav.navbar-nav (без места)

.nav.navbar-nav>li>a { 

    color: #FFFFFF; 
}