菜单栏中活动项目的颜色不同

时间:2013-01-18 12:59:38

标签: html css

我正在尝试更改此菜单中第一项的颜色(用户知道这是活动项的方式),有什么帮助吗?

<ul>
  <li><a href="#" class="current">jkfasdf</a></li>
  <li><a href="#">jkffasdf fjaskdfasfs jajklfd fjklasdfas</a></li>
</ul>

ul{
  background: red;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  float: left; #esto permite que se adapte el ancho del ul al contenido..
  # quizas por ello no se pueda centrar si se quiere :)
}

li {
  padding: 10px; display: inline-block;
  border-left: 1px solid white;
  width: 100px;
  text-align: center;
  vertical-align: middle;
}
li:first-child {border-left: none;}

li.current {
   background: yellow;
}

a {

}

这是jsfiddle:

http://jsfiddle.net/y3NCq/46/

2 个答案:

答案 0 :(得分:2)

你错过了一个空格:li .current {。如果没有空格,则会尝试将其应用于licurrent的{​​{1}}项,您希望将其应用于li的子级current

答案 1 :(得分:0)

您可以尝试以下

li a.current {
    background: yellow;
}
相关问题