Selektoren für Navbar-Text

Question

Welche Selektoren muss ich aufrufen, um die Textfarbe in der Navbar zu ändern? Ich habe versucht, nur. Navbar anzurufen und hatte keine Veränderung? Ich habe auch versucht, .nav.navbar li anzurufen und immer noch kein Glück.

.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

Sie tun es richtig, aber das Problem wahrscheinlich ist, dass Sie auch Selektoren Ändern der Farbe aller „ein <>“ mit Tags oder selektivere Selektoren mit:

nav{ 
color: black; 
} 

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

der ersten Der Selektor wird durch den zweiten ersetzt, weil "nav.navbar-nav" selektiver ist als nur "nav". Da sich der Text jedoch innerhalb der Tags "< a>" befindet, ist die Farbe rot.

Es gibt jedoch zwei Möglichkeiten, diese Wähler außer Kraft zu setzen:

1.Erstellen ein selektiver Selektor:

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

2.Use wichtig:!

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

wichtige Eigenschaften werden haben eine höhere Priorität als andere Eigenschaften.

Answer 2

die Klasse in den Anker-Tag hinzufügen, nicht für li. etwas wie unten, um Farbe für Text hinzuzufügen.

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

Answer 3

Das Anker-Tag hat seine eigenen CSS-Eigenschaften, die Sie angeben müssen, um es zu überschreiben.

.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 -->