javascript - 我的 css 类没有通过，使用 JQuery toggleClass

Question

好的，所以我基本上有了这个列表。我想做的只是用 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;}

头:

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