jquery - 用另一个覆盖一个 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 的 Specifics on Specificity教程很有帮助。

简而言之，更具体意味着更高的优先级:

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

在可能的情况下，避免 !important(正如有人在下面推荐的那样)——这是一种 hack，意思是(含糊地)“此规则适用于任何其他规则之上”。有关如何明智地使用它的信息，请参阅文章中 Chris 的评论。