当前导航类不起作用，在 HTML/CSS 中答案

【问题标题】：Current class for navigation not working, in HTML/CSS当前导航类不起作用，在 HTML/CSS 中
【发布时间】：2014-09-28 16:26:31
【问题描述】：

我在让我目前的课程正常工作时遇到问题。我希望当前页面的 <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;
}

请帮忙。我完全迷路了。

【问题讨论】：

.current {background-color:#FFF !important;}
因为您正在使用current 类设置li 元素的样式，但是您已将current 类附加到a 元素；因此您的选择器是错误的，无法按设计工作。

标签： html css class

【解决方案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;
}

【讨论】：