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);
}

最终目标是让这些元素褪色＆＃34;通过在单击某个元素时更改其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 { ~~background: none repeat scroll 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

类被添加，但没有影响

1 个答案: