如何使用CSS为选定的列表项添加不同的颜色？ [英] How to give a different color to a selected list item with CSS?

问题描述

我知道这个问题以前曾被问过很多次。但我无法为我的代码找到正确的技巧。我想要导航栏中的活动列表项目的颜色不同。明显。傻小东西。我知道。但请尽量帮助。

以下是我的 HTML 代码：

 < div id =container> 
< ul id =nav> 
< li class =active>< a href =am_home.html>主页< / a>< / li> 
< li>< a href =am_teachingassistants.php>助教< / a>< / li> 
< li>< a href =am_courseinfo.php>课程信息< / a>< / li> 
< li>< a href =am_timetable.php>时间表< / a>< / li> 
< / ul> 
< / div> 
  

以下是 CSS 文件：

  #container {
 position：relative; 
 top：-2em; 
 z-index：2; 
 width：1200px; 
保证金：auto auto; 
} 
 
 #nav {
 position：relative; 
 float：left; 
 margin-left：400px; 
} 
 
 #nav li {
 list-style：none; 
 float：left; 
 border-right：1px solid＃afc4cc; 
} 
 
 #nav li a {
 position：relative; 
 z-index：2; 
 float：left; 
 padding：5px 45px; 
 font-size：15px; 
 font-weight：bold; 
 font-family：helvetica，arial，sans-serif; 
 text-decoration：none; 
颜色：＃39aea8; 
} 
 
 ul，li {
 margin：0; 
 padding：0; 
} 
 
 ul＃nav li a：link，ul＃nav li a：visited {
 color：＃39aea8; 
 text-decoration：none; 
} 
 
 ul＃nav li a：hover，ul＃nav li a：active {
 color：＃f4ba51; 
 text-decoration：none; 
} 
  

解决方案

码。只需将其替换为：

  ul＃nav li a：hover，ul＃nav li a：active {
} 
  

与此：

  ul＃nav li a：hover，ul＃nav li.active a {
 // here here styling 
} 
  

，你很好走。您在调用CSS中的活动类时犯了一个错误。

I know this question has been asked so many times before. But I just can't find the right trick for my code. I want a different color for my active list item in the navigation bar. Obviously. Silly little thing. I know. But please try to help.

Here's my HTML code:

<div id="container">  
    <ul id="nav">  
        <li class="active"><a href="am_home.html">Home</a></li>  
        <li><a href="am_teachingassistants.php">Teaching Assistants</a></li>  
        <li><a href="am_courseinfo.php">Course Info</a></li>  
        <li><a href="am_timetable.php">Time Table</a></li>  
    </ul>  
</div>  

and Here's the CSS file:

#container {
    position: relative;
    top: -2em;
    z-index: 2;
    width: 1200px;
    margin: auto auto;
}

#nav {
   position: relative;
   float: left;
   margin-left: 400px;
}

#nav li {
    list-style: none;
    float: left;
    border-right: 1px solid #afc4cc;
}

#nav li a {
   position: relative;
   z-index: 2;
   float: left;
   padding: 5px 45px;
   font-size: 15px;
   font-weight: bold;
   font-family: helvetica, arial, sans-serif;
   text-decoration: none;
   color: #39aea8;
}

ul, li {
    margin: 0;
    padding: 0;
}

ul#nav li a:link,ul#nav li a:visited {
    color: #39aea8;
    text-decoration: none;
}

ul#nav li a:hover,ul#nav li a:active {
    color: #f4ba51;
    text-decoration: none;
}

解决方案

There's something wrong with your CSS code. Just replace this:

 ul#nav li a:hover,ul#nav li a:active{    
}

with this:

 ul#nav li a:hover,ul#nav li.active a{
 // here styling 
}

and you are good to go. You just made a mistake while calling the active class in CSS.

这篇关于如何使用CSS为选定的列表项添加不同的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！