jquery - 类被添加，但没有影响

Question

我正在开发一个元素，在添加类时遇到了一些棘手问题，但该类没有生效。

$('.anchor-list > li').addClass('anchor-list-fade');

这是元素的基类:

.anchor-list > li
{
    background: rgba(50, 57, 98, 1);
    margin-bottom: 5px;
    display: none;
}

这是添加的类:

.anchor-list-fade
{
    background: rgba(50, 57, 98, 0.4);
}

最终目标是通过在单击某个元素时更改其 alpha 值来使这些元素“淡出”。单击示例中的 V0(单击 F 查看 V)http://jsfiddle.net/jayblanchard/899dv/我可以在 Firebug 中检查 F 项的父级(列表元素)并看到这一点，添加的类带有删除线，表明某些其他样式正在优先使用，以及正在优先使用的样式:

.anchor-list > li {
    background: none repeat scroll 0 0 rgba(50, 57, 98, 1);
    margin-bottom: 5px;
}

.anchor-list-fade { 背景:无重复滚动 0 0 rgba(50, 57, 98, 0.4);}

我觉得我在这里遗漏了一些明显的东西，但我一直在尝试一些方法来纠正这个问题，但没有成功。为什么添加的类没有生效？

Answer 1

这是因为您的第二个选择器不太具体。请参阅http://css-tricks.com/specifics-on-css-specificity/也就是说，当存在冲突的规则时，引擎会按照特殊性的顺序使用具有更多组件的规则:id、class、tagname。 (警告这是一种简化，请访问链接了解更多详细信息)

您的第一个选择器有一个类和一个标签，您的第二个选择器只有一个类。第一个获胜。

以下内容可行

.anchor-list > li.anchor-list-fade