用另一个重写一个css类？

我有一个列表，并定义了li风格。我想要替换单个元素的样式，但它似乎没有任何视觉效果。例如：用另一个重写一个css类？

.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");

该项目不改变颜色，绿色的，虽然，但该报告类设置为“富”：

alert($(item).attr('class'));

，所以我想我不理解CSS规则在这里，像李类定义只是重写任何其他我这样做，但是我想反到是真的，我想覆盖李样式定义与富。我们如何做到这一点？

感谢

来源

2010-06-14 user246114

你有没有试图改变背景颜色？或者你的实际代码比那更复杂？ – 2010-06-14 13:09:05

这些是规则集，而不是类（这可能是你误解的来源）。类是一个HTML概念，而不是CSS。（CSS有匹配HTML类成员的元素的类选择器） – Quentin 2010-06-14 13:13:15

“.myList li”选择符比“.foo”选择符更具体，所以当这两个规则适用时，该项目将为黄色。当你做“$（item）.removeClass（）;”时你从li中删除任何类名，但是如果ul仍然是“myList”类名，那么li仍然会从“.myList li”选择器中获取样式。更改CSS

一种方法是：

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

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

来源

2010-06-14 13:10:10 Douglas

好吧我认为这对我想要做的很好 - 但现在如果我想为我的列表元素设置选择器，现在使用的字符串是完整的东西，例如：$（item）.addClass（“。myList li.foo“）;对吧？ – user246114 2010-06-14 13:27:15

哦，刚刚尝试过，似乎工作，我可以引用选择器名称只是由其最后一个组件（“foo”），谢谢。 – user246114 2010-06-14 13:34:29

你遇到了问题具有特异性，或其他什么语言称之为“优先级”。你可能会发现Chris Coyier的Specifics on Specificity教程很有帮助。

简单，更具体的手段更高的优先级：

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

如果可能的话，应避免!important（有人建议下） - 这是一个黑客工具，手段（隐约）说：“这个规则适用上述任何其他规则” 。关于如何合理使用它，请参阅Chris的文章评论。

来源

2010-06-14 13:08:38

使用

li.foo { 
    background-color: green; 
}

来源

2010-06-14 13:09:22 rahul

.myList li.foo {background-color：green！important; }将确保它按预期工作（我认为）。 – drmonkeyninja 2010-06-14 13:12:06

您可以强制一个特定的风格，加入!important的规则来覆盖。

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

虽然，意外的惊喜，我不认为IE6正确地承认它。

来源

2010-06-14 13:09:33 Jeriko

'！important'是一个大锤，它只有两种状态（哦，不！我需要重写某些东西！重要！）。它通常**最好避免。 – Quentin 2010-06-14 13:13:53

我同意。我认为还会有其他更好的答案，但有时候这只是你需要的:) – Jeriko 2010-06-14 13:19:34

我同意戴维的观点。此外，IE6确实支持它，只要你不做[古怪的东西]（http://modxcms.com/about/team/rthrash/css-hacking-important.html）就像声明一个css属性两次，但将第一个标记为！重要。疯。 – 2010-06-14 13:19:51

-1

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

来源

2010-06-14 13:10:08 drmonkeyninja

如果我正确地理解你（并且我不确定我是谁），那么你错过了正在使用JS添加的类。 – Quentin 2010-06-14 13:15:46

在添加类之前是否未调用removeClass？ – drmonkeyninja 2010-06-14 13:20:17

li本身没有班级，所以拨打.removeClass()无关。

您可以这样做

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

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

我没有测试过这一点，但像

li.foo {background-color: green;}

可能做的伎俩，使浏览器尊重您的意愿FOO。

我建议你读安迪克拉克的真棒CSS: Specificity Wars充分神交CSS具体

来源

2010-06-14 13:12:59

CSS工作与给予基于点的系统上不同的选择优先级。具有最多点的选择器“胜利”并确定元素的样式。

简单选择器（例如对，李，UL，身体，...）：1点
类（例如包含.foo，...）：10分
伪类（例如：悬停，：：focus，：active，...）：10分
ID（eg #wrapper，＃content，#header，...）：100分
style =“...”（例如style = “color：red”）：1000分

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

如果即使两种风格的总和点相等，后面定义的“胜利”也是如此。

来源

2010-06-14 13:14:34

很感谢细节。 – user246114 2010-06-14 13:35:32

用另一个重写一个css类？

回答

相关问题