无法更改包含无序列表的div的背景

Question

只是想动态地更改背景，似乎无法做到这一点，我在这里想念的是什么？ 我需要澄清的是，这是我要更改的容器div的背景...

$('#container').click(function(){
    $(this).toggleClass('bgchange');
});

$('#container ul li').click(function(){
    $(this).toggleClass('bgchange');
});

小提琴http://jsfiddle.net/7ed7zs9w/1/

Answer 1

id标识符比容器css的类标识符更具体，因此它被覆盖。 因此，如果要覆盖容器并更改颜色，请添加!important 。 示例http://jsfiddle.net/e5bgsh3v/

Answer 2

JSFIDDLE演示-> http://jsfiddle.net/7ed7zs9w/4/

发生这种情况是因为您在CSS的#container选择器中提到了background-color，它的层次结构比类bgchange 。 因此，它永远不会改变。

进行以下更改：

HTML

<div id="container" class="redbg"> //add class redbg here

CSS

#container{
    height: 150px; //remove background-color here
    overflow-y: scroll;
}
.bgchange{
    background-color: blue;
}
.redbg{
    background-color: red;
}

jQuery的

$('#container').click(function(){
    $(this).toggleClass('redbg bgchange'); // toggle between 2 classes instead of 1
});

$('#container ul li').click(function(e){
    e.stopPropagation(); // add this here
    $(this).toggleClass('bgchange');
});