2017-02-11 42 views
1

我的頭部有一個小問題。我正在嘗試(實際嘗試了很多)來更改「當前」菜單項的顏色,但沒有成功。我知道我必須重寫Bootstrap的默認顏色。然而,到目前爲止,幾乎所有與選擇器(在我的CSS文件中)的組合都沒有做到這一點。是什麼賦予了?爲什麼會忽略我(當前)導航項的顏色?

我也嘗試了類似問題中提出的解決方案,但似乎沒有任何工作。

下面的代碼:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Collins | Welcome</title> 
    <link rel="shortcut icon" href="img/favicon.ico"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link href="https://fonts.googleapis.com/css?family=Pangolin|Ubuntu" rel="stylesheet"> 
    <style type="text/css"> 
     body { 
     font-family: Arial, Helvetica, sans-serif; 
     font-family: 'Ubuntu', sans-serif; 
     font-size: 15px; 
     line-height: 1.5em; 
     padding: 0; 
     margin: 0; 
     background-color: #f4f4f4; 
     } 

     header { 
     background-color: #1B1B1B; 
     padding-top: 30px; 
     min-height: 70px; 
     border-bottom: #228B22 3px solid; 
     } 

     header a { 
     color: #fff; 
     text-decoration: none; 
     text-transform: uppercase; 
     font-size: 16px; 
     } 

     header li { 
     float: left; 
     display: inline; 
     padding: 0 20px 0 20px; 
     } 

     header .logo { 
     float: left; 
     } 

     header .logo h1 { 
     margin: 0; 
     margin-top: -11px; 
     color: #fff; 
     font-size: 25px; 
     } 

     header .highlight, header #current { 
     color: #228B22; 
     font-weight: bold; 
     } 

     header nav { 
     float: right; 
     margin-top: -8px; 
     } 
    </style> 
    </head> 

    <body> 
    <header> 
     <div class="container"> 
     <div class="logo"> 
      <h1><span class="highlight">c/o</span> dev-ign</h1> 
     </div> 
     <nav> 
      <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="portfolio.html">Portfolio</a></li> 
      <li id="current"><a href="contact.html">Contact</a></li> 
      </ul> 
     </nav> 
     </div> 
    </header> 
    </body> 
</html> 

回答

2

錨(a)需要具體

header #current a { 
    color: #228B22; 
    font-weight: bold; 
} 
+0

針對性沒錯。這工作。謝謝! –

相關問題