当前的导航类不起作用,在HTML / CSS中

时间:2014-09-28 16:26:31

标签: html css class

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

请帮忙。我完全迷失了。

1 个答案:

答案 0 :(得分:0)

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