Класс CSS не используется в элементе списка со стилем

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

Поскольку вы определяете класс, а не идентификатор, вам нужно использовать селектор класса . вместо селектора идентификатора #:

#columnTabSelected {
 background: #CCCCCC !important;
}

Должно быть

.columnTabSelected {
 background: #CCCCCC !important;
}

Answer 2

У вас это как class="columnTabSelected", но ваш CSS написан как #columnTabSelected. Измените этот последний бит на .columnTabSelected, поскольку он представляет классы, а не идентификаторы.