Navbar文本的選擇器

我需要調用哪些選擇器來更改導航欄上的文本顏色？我試過只打電話給.navbar，沒有改變？我也嘗試過打電話給.nav.navbar li，但仍然沒有運氣。Navbar文本的選擇器

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

來源

2016-10-26 Marshawn Perkins

你做正確，但問題可能是你也有選擇改變所有的顏色「<一>」標籤，或有更多的選擇性的選擇：

nav{ 
color: black; 
} 

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

第一選擇器將被替換爲第二個，因爲「nav.navbar-nav」比「nav」更具選擇性。但由於文本位於「< a>」標籤內，因此它們的顏色將爲紅色。

然而有2種方式來覆蓋這些選擇：

1.創建一個更有選擇性的選擇：

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

2.使用重要：！

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

重要的屬性將比其他房產具有更高的優先權。

來源

2016-10-26 15:18:46

的類添加到錨標記不立。像下面的東西，爲文本添加顏色。

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

來源

2016-10-26 15:08:29

錨標記具有它自己的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 -->

來源

2016-10-26 15:25:57

Navbar文本的選擇器

回答

相關問題