当前导航类无法正常工作，使用HTML/CSS

Question

我遇到问题，无法正常工作。我想要当前页面的<nav>按钮是不同的颜色。我尝试了各种不同的方法来解决这个问题。我可以让文字改变颜色，但不能改变背景颜色。以下是我有：

HTML

<nav> 
    <ul id="navlist"> 
     <li><a class="current" href="index.html"> Home </a></li> 
     <li><a href="history.html"> Beer History </a></li> 
     <li><a href="brews.html"> Brews </a></li> 
     <li><a href="recipe.html"> Recipes </a></li> 
     <li><a href="about.html"> About Us </a></li> 
     <li><a href="contact.html"> Contact Us </a></li> 
    </ul> 
</nav> 

CSS

li.current a{ 
    border: 2px solid #413B02; 
    padding: 10px; 
    text-decoration:none; 
    color: green; 
    background-color: #FFF; 
} 
nav{ 
    list-style-type:none; 
    color: white; 
    font-size: 19px; 
    height: 40px; 
    line-height: 40px; 
    text-align:center; 
    font-family: "cinzelregular", Geneva, sans-serif; 
    padding: 30px; 
} 

li{ 
    display:inline; 
    margin: 0; 
} 

ul#navlist a:link,a:visited{ 
    background: linear-gradient(180deg,#E6E7E8, #654C36, #3D2210,#3D2210); 
    border: 2px solid #413B02; 
    padding: 10px; 
    text-decoration:none; 
    color: #FFF; 
} 

ul#navlist a:hover, a:active{ 
    background: linear-gradient(180deg,#E6E7E8, #AA7A4C, #D36700); 
    border: 2px solid #413B02; 
    padding: 10px; 
    text-decoration:none; 
    color: black; 
} 

请帮助。我完全失去了。

Answer 1

HTML

<nav> 
    <ul id="navlist"> 
     <li><a class="current" href="index.html"> Home </a></li> 
     <li><a href="history.html"> Beer History </a></li> 
     <li><a href="brews.html"> Brews </a></li> 
     <li><a href="recipe.html"> Recipes </a></li> 
     <li><a href="about.html"> About Us </a></li> 
     <li><a href="contact.html"> Contact Us </a></li> 
    </ul> 
</nav> 

CSS

li a.current{ 
    border: 2px solid #413B02; 
    padding: 10px; 
    text-decoration:none; 
    color: green; 
    background-color: #FFF; 
} 

这将是工作

，但如果你做这样的事情

HTML我会更喜欢

<nav> 
    <ul id="navlist"> 
     <li class="current"><a href="index.html"> Home </a></li> 
     <li><a href="history.html"> Beer History </a></li> 
     <li><a href="brews.html"> Brews </a></li> 
     <li><a href="recipe.html"> Recipes </a></li> 
     <li><a href="about.html"> About Us </a></li> 
     <li><a href="contact.html"> Contact Us </a></li> 
    </ul> 
</nav> 

CSS

#navlist li a { 
    padding: 10px; 
    text-decoration: none; 
    color: #fff; 
    background: green; 
} 

#navlist li.current a { 
    background: #fff; 
    color: green; 
}