我有一个列表,其中定义了 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 样式定义。我们如何做到这一点?
谢谢
最佳答案
您遇到了特殊性问题,或者其他语言称为“优先级”的问题。您可能会找到 Chris Coyier 的 Specifics on Specificity教程很有帮助。
简而言之,更具体意味着更高的优先级:
ul.mylist li.foo {
background-color: green;
}
在可能的情况下,避免 !important
(正如有人在下面推荐的那样)——这是一种 hack,意思是(含糊地)“此规则适用于任何其他规则之上”。有关如何明智地使用它的信息,请参阅文章中 Chris 的评论。
关于jquery - 用另一个覆盖一个 css 类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3037391/