用另一个覆盖一个css类？

Question

我有一个列表,定义了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样式定义.我们如何做到这一点？

谢谢

Answer 1

您遇到了特异性问题,或者其他语言称之为"优先级"的问题.您可能会发现Chris Coyier的特异性细节教程很有帮助.

简而言之,更具体的意思是更高的优先级:

ul.mylist li.foo {
  background-color: green;
}

在可能的情况下,避免!important(如下面某人的建议) - 这是一个黑客,意味着(含糊地)"此规则适用于任何其他规则".请参阅Chris在文章中关于如何合理使用它的评论.

Answer 2

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

更改CSS的一种方法是:

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

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