jquery – 用另一个重写一个css类？

我有一个列表,定义了li样式.我想替换单个元素的样式,但它似乎没有任何视觉效果.例：

.myList li {
  background-color: yellow;
}

.foo {
  background-color: green;
}

<ul class='myList'>
  <li>Hello</li>
</ul>

当我向列表中添加项目时,它正确应用了.myList li样式.我现在尝试删除所有样式并将foo样式应用于单个项目(使用jquery)：

$(item).removeClass();
$(item).addClass("foo");

该项目不会将颜色更改为绿色,但报告该类设置为’foo’：

alert($(item).attr('class'));

所以我想我不是在理解css规则,看起来li类定义只是覆盖了我做的其他事情,但是我希望反过来是真的,我想用foo覆盖li样式定义.我们如何做到这一点？

谢谢

解决方法

“.myList li”选择器比“.foo”选择器更具体,因此当两个规则都适用时,该项目将为黄色.当你执行“$(item).removeClass();”时你从li中删除任何类名,但如果ul仍然有它的“myList”类名,那么li仍然会从“.myList li”选择器中获取样式.

更改CSS的一种方法是：

.myList li     { background-color: yellow; }
.myList li.foo { background-color: green; }

然后很明显,第二条规则比第一条规则更具体.