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（正如某人在下面建议的那样） - 这是一个黑客，意味着（含糊地）“此规则适用于任何其他规则”。请参阅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; }

然后很明显，第二条规则比第一条规则更具体。

Answer 3

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

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

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

Answer 4

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

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

如果两个样式的总和点彼此相等，则后者定义为“胜利”。

Answer 5

使用

li.foo { 
  background-color: green; 
}

Answer 6

li本身没有类，因此调用.removeClass()无关。

你可以做类似

的事情

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

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

我没有测试过这个，但是像

那样

li.foo {background-color: green;}

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

我建议阅读Andy Clarke真棒CSS: Specificity Wars以完全了解css特异性

Answer 7

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