用另一个覆盖一个css类？答案

【问题标题】：Override one css class with another?用另一个覆盖一个css类？
【发布时间】：2010-06-14 13:05:16
【问题描述】：

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

谢谢

【问题讨论】：

标签： jquery css

【解决方案1】：

您遇到了与特异性有关的问题，也就是其他语言所说的“优先级”问题。您可能会发现 Chris Coyier 的 Specifics on Specificity 教程很有帮助。

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

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

在可能的情况下，避免使用!important（正如有人在下面推荐的那样）——这是一个 hack，意味着（模糊地）“这条规则适用于任何其他规则”。请参阅文章中 Chris 的 cmets，了解如何合理使用它。

【讨论】：

【解决方案2】：

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

更改 CSS 的一种方法是：

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

那么很明显，第二条规则比第一条更具体。

【讨论】：

好的，我认为这很适合我想做的事情 - 但现在如果我想为我的列表元素设置选择器，现在要使用的字符串就是完整的东西，比如：$(item ).addClass(".myList li.foo");，对吗？
哦，刚刚试过了，好像可以，我可以通过它的最后一个组件（“foo”）引用选择器名称，谢谢。

【解决方案3】：

您可以通过将!important 添加到规则中来强制覆盖特定样式。

.foo { background-color: green!important; }

虽然，令人惊讶的是，我认为 IE6 并没有很好地尊重它。

【讨论】：

!important 是一把大锤，它只有两种状态（哦不！我需要覆盖一些东西！重要的！）。通常最好避免。
我同意。而且我认为会有其他更好的答案，但有时这就是你所需要的:)
我同意大卫的观点。此外，IE6 确实支持它，只要您不执行 wacky stuff 之类的声明两次 CSS 属性但将第一个标记为 !important 即可。疯了。

【解决方案4】：

CSS 使用基于点系统的不同选择器的优先级。点数最多的选择器“获胜”并确定元素的样式。

您可以使用属性“！important”来强制执行最高优先级。请注意，IE 6 确实完全忽略了此属性。

如果两个样式的总和点相等，则后面定义的“获胜”。

【讨论】：

【解决方案5】：

使用

li.foo { 
  background-color: green; 
}

【讨论】：

【解决方案6】：

li 本身没有类，所以调用.removeClass() 没有任何关系。

你可以做类似的事情

$(item).closest('.myList').removeClass()

这会从整个列表中删除 myList 类，但这可能不是您想要的。

我还没有测试过，但是类似

li.foo {background-color: green;}

可能会让浏览器尊重你的 foo 意愿。

我建议阅读 Andy Clarke 的精彩 CSS: Specificity Wars 以充分了解 css 的特殊性

【讨论】：

【解决方案7】：

不确定我是否正确地遵循了这一点，但听起来您正在正确地将类添加到列表项，但该项目仍然应用了“.myList li”样式，因为列表元素上没有类消除。因此原始样式优先。

【讨论】：