ナビゲーションバーのフォントの色を変更できません（ブートストラップを使用しています）

Question

ナビゲーションメニューの「a」要素のデフォルトの色が変更されない理由を理解できません。私はこの特定の色 "＃e5dfdc"に設定したいと思います。私は何が欠けていますか？あなたが私のコード、特に "navbar-right li a"セレクターを見ていただければ幸いです。ありがとう！

enter image description here

Project on Codepen

HTML

<nav class="navbar navbar-default"> 
     <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="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="#"><img id="logo-img" src="http://www.fillfox.com/wp-content/uploads/2014/02/FILL-FOX-LOGO-ONLY3A-1024x1024.png"></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 navbar-right"> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Features</a></li> 
      <li><a href="#">Species</a></li> 
      <li><a href="#">Buy it now</a></li> 

      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
</nav> 

<section class="upper-section"> 

    <div class="container"> 

     <div class="row"> 

      <div class="row"> 

      <div class="col-md-6 col-md-offset-3 col-xs-12" id="upper-sec-words-wrapper"> 
       <p>“Sweet, Beautiful and Dangerous”</p> 
       <p>ADOPT THE MOST GORGEOUS FOXES TO EMBOLISH YOUR SETTING</p> 
      </div> 

      </row> <!--end of inside row--> 

     <div class="col-md-6 col-md-offset-3 col-xs-12 upper-section-central-content"> 

      <div id="upper-sec-img-wrapper"> 
       <img class="img-responsive" id="upper-section-img" src="http://pngimg.com/upload/fox_PNG370.png"> 

      </div> 

     </div> <!--end of col-md-6--> 

     </div> <!--end of row--> 

    </div><!-- /.container-fluid --> 

</section> 

CSS

@import 'https://fonts.googleapis.com/css?family=Vesper+Libre:400,500,700,900&subset=devanagari,latin-ext'; 

.navbar { 
    background-color:#bcaaa4; 
    height:100px; 
    margin-bottom: 0 !important; 
    border:none; 
    /*border-bottom:1px solid black;*/ 
    border-radius: 0 !important; 
    -moz-border-radius: 0 !important; 
} 

.navbar-right li a { 
    font-family: 'Oswald', sans-serif; 
    font-size:18px; 
    color:#efebe9; 
    text-transform:uppercase; 
} 

a.navbar-brand { 
    /*background-color:red;*/ 
    padding:0; 
    width:100px; 
    height:100%; 
} 

#logo-img { 
    padding-top:0; 
    width:100px; 
} 

/*********** UPPER SECTION ************/ 
.upper-section-central-content { 
    /*background-color:red;*/ 
    margin-top:120px; 
    height:auto; 
} 

#upper-sec-img-wrapper img { 
    width:400px; 
} 

#upper-sec-img-wrapper { 
    width:400px; 
    margin:0 auto; 
} 

.upper-section { 
    padding-top:0 !important; 
    background-color:#bcaaa4; 
} 

#upper-sec-words-wrapper { 
    margin-top:120px; 
    text-align:center; 
    /*background-color:red;*/ 
} 
#upper-sec-words-wrapper p:first-child{ 
    font-family:"Roboto"; 
    font-size:30px; 
    font-weight:bold; 
    color:#efebe9; 
} 

#upper-sec-words-wrapper p:nth-child(2){ 
    font-family:"Raleway"; 
    font-size:18px; 
    font-weight:light; 
    color:#efebe9; 
} 

/***** Make text responsive *****/ 

@media all and (max-width: 2000px) { 
/* screen size until 1200px */ 

    navbar-nav li a { 
     font-size: 18px; /* 1.5x default size */ 
    } 
} 

@media all and (max-width: 1600px) { 
/* screen size until 1200px */ 

    navbar-nav li a { 
     font-size: 18px; /* 1.5x default size */ 
    } 
} 

@media all and (max-width: 1200px) { 
/* screen size until 1200px */ 

    navbar-nav li a { 
     font-size: 18px; /* 1.5x default size */ 
    } 
} 

@media all and (max-width: 1000px) { /* screen size until 1000px */ 
    navbar-nav li a { 
     font-size: 18px; /* 1.5x default size */ 
    } 
    #upper-sec-words-wrapper { 
     margin-top:180px; 
    } 
    } 
@media all and (max-width: 500px) { /* screen size until 500px */ 
    navbar-nav li a { 
     font-size: 18px; /* 1.5x default size */ 
    } 

    #upper-sec-img-wrapper img { 
      width:300px; 
     } 

    #upper-sec-words-wrapper p:first-child{ 
     font-family:"Roboto"; 
     font-size:24px; 
     font-weight:bold; 
     color:#efebe9; 
    } 

#upper-sec-words-wrapper p:nth-child(2){ 
     font-family:"Raleway"; 
     font-size:12px; 
     font-weight:light; 
     color:#efebe9; 
    } 
} 

Answer 1

ブートストラップは.navbar-default .navbar-nav > li > aセレクタの下のa要素にすでに定義されているスタイルを持っているため、デフォルトの色を取得しています。

あなたに色のプロパティを変更することで、これを迂回することができます：

.narbar-right.my-navbar li a { 
    font-family: 'Oswald', sans-serif; 
    font-size:18px; 
    color:#efebe9; 
    text-transform:uppercase; 
} 

---

を：

color: #efebe9 !important; 

---

別の解決策は、あなたのul別のクラスを与え、代わりにそのいずれかを選択することができ

もちろんPranjalの提案したように、デフォルトのスタイルを完全に上書きすることもできます：

.navbar-default .navbar-nav>li>a{ 
    color: #e5dfdc; 
} 

が、これは（あなたもそのどこかに持っている場合）ので、すべてのnavbarsの色を変更するには、それは同様にあなたのサイト上の他のnavbarsには影響しません絶対に確信している場合を除き、この溶液を用いて慎重になります。

Answer 2

は、あなたのCSSコードに以下のコードを追加します。

.navbar-default .navbar-nav>li>a{ 
    color: #e5dfdc; 
} 

Answer 3

これは、デフォルトのCSSを上書きすることができます

.navbar-default .navbar-nav > li > a { 
     color: #e5dfdc; 
} 

を追加することで第777位

.navbar-default .navbar-nav > li > a { 
    color: #777; 
} 

する色を強制されたコードでした。インスペクタを試してみて、どのスタイルが要素に適用されているかを確認してください。それは本当にデバッグを速くするのに役立ちます。

ハッピーコーディング！