HTML/CSS로 탐색을위한 현재 클래스가 작동하지 않습니다.

Question

현재 클래스가 작동하는 데 문제가 있습니다. 현재 페이지의 <nav> 버튼을 다른 색상으로 변경하겠습니다. 나는 이것을 고치기 위해 온갖 종류의 다른 방법을 시도했다. 배경 색상이 아닌 색상을 변경하는 텍스트를 얻을 수 있습니다. 여기에 내가 무엇을 가지고 :

HTML 도와주세요

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; 
} 

<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. 나는 완전히 잃어 버렸다.

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; 
}