私のCSSクラスは、JQuery toggleClassを使用してキックスルーされていません

Question

Ok、私は基本的にこのリストを持っています。私がしようとしているのは、toggleClassを使ってリスト内の項目を強調表示するだけです。

<div class="listbox"> 
    <ul> 
     <li>111</li> 
     <li>222</li> 
     <li>333</li> 
     <li>444</li> 
     <li>555</li> 
    </ul> 
</div> 


<script type="text/javascript"> 
    $('#container .listbox li').click(function() { 

     $(this).toggleClass('highlight'); 

    }); 
</script> 

CSS：

div.listbox ul li{ 
    background: #eee; 
    padding: 15px 20px; 
    border-bottom: 1px solid #999; 
    border-top: 1px solid #fff;} 

HEAD：

<style type="text/css"> 
    .highlight{ 
     background: #aaa; 
     padding: 20px 15px; 
     border-bottom: 1px solid #fff; 
     border-top: 1px solid #999;} 
</style> 

問題は、私はの.css-docにCSSプロパティを指定した場合、私はそれを修正することができないということです新しいクラスの値。

私はこれをstyleattributesの上と下に配置してみました。下のように、頭の部分に配置してみました。

クリックすると、jsはクラスとすべてを追加しますが、事前定義された値は変更されません。

Answer 1

のようなもののためにクラスspecificityを増やしてみてください！あなたが追加しようとするかもしれません

div.listbox ul li.highlight {