Warum wird die Farbe meiner (aktuellen) Nav-Objekte nicht überschrieben?

Ich habe ein kleines Problem mit meinem Header-Bereich. Ich versuche (habe viel versucht), die Farbe des 'aktuellen' Menüpunktes zu ändern, aber ohne Erfolg. Ich weiß, dass ich die Standardfarbe von Bootstrap überschreiben muss. Fast alle Kombinationen mit den Selektoren (in meiner CSS-Datei) haben dies bisher jedoch nicht geschafft. Was gibt?Warum wird die Farbe meiner (aktuellen) Nav-Objekte nicht überschrieben?

Ich habe auch die vorgeschlagenen Lösungen in ähnlichen Fragen versucht, aber nichts scheint zu funktionieren.

Hier ist der Code:

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

Quelle

2017-02-11 Collins Orlando

Anker (a) müssen speziell Yup

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

Quelle

2017-02-11 21:42:35 pol

abgezielt werden. Das hat funktioniert. Vielen Dank! –

Warum wird die Farbe meiner (aktuellen) Nav-Objekte nicht überschrieben?

Antwort

Verwandte Themen