Navbarのテキストのセレクタ

Question

navbarのテキストの色を変更するには、どのセレクタを呼び出す必要がありますか？ 私は.navbarを呼び出してみましたが、変更はありませんでしたか？私も.nav.navbar liとまだ運がないと呼びました。

.bg-1 { 
 
    background-color: black; 
 
    color: yellow; 
 
} 
 

 
.nav.navbar-nav li { 
 
    color: yellow; 
 
}

<header> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <!-- 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="#">Honey Dos Salon</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="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> 
 
       <li><a href="#">Pricing</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </div><!-- /.navbar-collapse --> 
 
     </div><!-- /.container-fluid --> 
 
     </nav> 
 
    </header>

Answer 1

あなたはそれを正しくやっているが、問題はおそらく、あなたはまた、すべての色を変更するセレクタ「<>」タグを持つ、またはそれ以上の選択的なセレクタを持っている：

nav{ 
color: black; 
} 

nav.navbar-nav{ 
color:yellow; 
} 
a{ 
color: red 
} 

最初"nav.navbar-nav"は単なる "nav"よりも選択的であるため、セレクタは2番目のセレクタに置き換えられます。しかし、テキストは "< a>"タグ内にあるので、その色は赤色になります。

これらのセレクタを上書きするには2つの方法があります：

1.Createより選択セレクタ：

nav.navbar-nav li a.color-yellow{ 
color: yellow; 
} 

2.Use重要！：

nav.navbar-nav{ 
color: yellow !important; 
} 

が重要な特性がします他のプロパティよりも優先順位が高くなります。

Answer 2

アンカータグにない李のクラスを追加します。テキストの色を追加するには、以下のようにします。

.nav.navbar-nav li a { 
    color: red; 
} 

Answer 3

アンカータグには、オーバーライドするために指定する必要がある独自のcssプロパティがあります。

.nav.navbar-nav li a { 
 
    color: yellow; 
 
}

<!-- 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="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> 
 
    <li><a href="#">Pricing</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    </ul> 
 
</div><!-- /.navbar-collapse --> 
 
</div><!-- /.container-fluid -->