4

我有这个html：

<div class="container">
    <div id="cell1" class="cell"><div class="content"></div></div>
    <div id="cell2" class="cell"><div class="content"></div></div>
    <div id="cell3" class="cell"><div class="content"></div></div>
</div>

CSS：

.container {
    width: 300px;
    height: 300px;
    background-color: green;
}

.cell {
    background-color: red;
}

#cell1 {
    width: 70px;
    height: 70px;
}

#cell2 {
    width: 70px;
    height: 70px;
}

#cell3 {
    width: 70px;
    height: 70px;
}

.white {
    background-color: white;
}

.yellow {
    background-color: yellow;
}

.content {
    width:40px;
    height:40px;
    background-color:blue;
}

Javascript：

$(document).on('click', '.cell', function(e) {

    $(this).parent().children().removeClass('white');
    $(this).parent().children().children().removeClass('yellow');

    $(this).addClass('white');
    $(this).find('.content').addClass('yellow');
});

我现在遇到的问题是 addClass('yellow') 没有效果。但是，如果我删除内容类中的背景颜色，它会起作用。有什么想法为什么？

jsFiddle 链接：http: //jsfiddle.net/rexwang/FWh6E/

感谢您的回答，它的工作原理！但是我真的不喜欢使用 addClass 和 removeClass，是否可以使用 e.currentTarget.id 来实现相同的目标？

4

5 回答 5

4

它可以工作，但.yellow背景样式会被背景样式覆盖.content，因为在样式表.content类中之后是.yellow.

一种方法是在 CSS 中交换这些类。

演示：http: //jsfiddle.net/FWh6E/2/

于 2013-05-22T07:35:14.970 回答
4

这.addClass() 是有效的，但由于 CSS 规则的应用方式，选择器比单个类选择.content器具有更大的权重- 请参阅CSS 特殊性以了解星球大战主题的特殊性解释。.yellow

在CSS 文档中，最后一个子句用于确定应用哪个规则。

最后，按指定顺序排序：如果两个声明具有相同的权重、来源和特异性，则后者指定获胜。导入样式表中的声明被认为在样式表本身的任何声明之前。

因此，您可以交换 CSS 文件中规则的顺序，在.yellow之后移动.content，或者通过向链中添加另一个选择器来赋予.yellow选择器更多权重，例如：

.content.yellow {
    background-color: yellow;
}
于 2013-05-22T07:37:55.890 回答
1

放 !important 为此

.yellow {
    background-color: yellow !important;
}

试试这个小提琴

于 2013-05-22T07:35:19.210 回答
1

JSFIddle 链接：http: //jsfiddle.net/Cj4PT/

你的代码

.yellow {
    background-color: yellow;
}

改成

.yellow {
    background-color: yellow!important;
}

.content背景样式是压倒一切 .yellow的样式

于 2013-05-22T07:35:26.940 回答
1

尝试这个

改变CSSyellow如下：

.yellow {
    background-color: yellow!important;
}

演示

于 2013-05-22T07:36:04.443 回答