Meine CSS-Klassen tritt nicht durch, mit JQuery toggleClass

Question

Ok, also habe ich im Grunde diese Liste. Was ich versuche zu tun, ist nur Elemente in der Liste mit toggleClass hervorzuheben.

<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> 

Das Problem ist, dass wenn ich eine CSS-Eigenschaft im CSS-doc angegeben haben, kann ich nicht, dass ändern Wert mit der neuen Klasse.

Ich habe versucht, es oberhalb und unterhalb der Styleattribute und, wie unten, in der Kopf-Region.

Beim Klicken fügt die js die Klasse und alle hinzu, aber alle vordefinierten Werte ändern sich nicht.

Answer 1

Versuchen Sie, die Klasse specificity für etwas zu erhöhen wie:

div.listbox ul li.highlight {