Question

我有一个基于它所在的div容器设置样式的列表项。我想为该项添加一个“选定”类，但它不会改变样式。 Firebug没有显示出来自css风格的任何风格。

你会看到我在第一个标签中添加了class =“columnTabSelected”，但这并没有改变任何东西。

这是Firebug的截图，显示样式未添加到元素中。 http://i49.tinypic.com/oszfqh.jpg

我缺少什么？

我的HTML

<div id="columnNewsTabs">
 <ul>
  <li id="recentHeadlinesLink" onclick="columnNews('recentHeadlines')" class="columnTabSelected">Recent</li>
  <li id="recentCommentstLink" onclick="columnNews('recentComments')">Comments</li>
  <li id="popularHeadlinesLink" onclick="columnNews('popularHeadlines')">Popular</li>
 </ul>
</div>

我的CSS

#columnNewsTabs {
 overflow:auto;
}

#columnNewsTabs ul {
 list-style:none;
 margin:0px;
 padding-left:0px;
}

#columnNewsTabs li {
 float:left;
 margin-right:2px;
 font-family:Tahoma;
 font-weight:bold;
 padding: 5px;
 border:1px solid #ccc;
 border-bottom:none;
}



#columnNewsTabs li:hover {
 float:left;
 margin-right:2px;
 color:black;
 font-family:Tahoma;
 font-weight:bold;
 padding: 5px
 border:1px solid #ccc;
 border-bottom:none;
 background:#ccc;
}

#columnTabSelected {
 background: #CCCCCC !important;
}

Answer 1

由于您要定义一个类而不是一个id，因此需要使用类选择器.而不是id选择器#：

#columnTabSelected {
 background: #CCCCCC !important;
}

应该是

.columnTabSelected {
 background: #CCCCCC !important;
}

Answer 2

您将其设为class="columnTabSelected"，但您的CSS写为#columnTabSelected。将最后一位更改为.columnTabSelected，因为这表示类而不是ID。

CSS类没有在带有样式的列表项上使用

2 个答案: