Javascript 在jquery中添加/切换css类到html元素时卡住了

嘿，伙计们，我是jQuery新手，一个人做东西有很多困难。我正在尝试将的样式更改为css类。更改，但不起作用。我真的需要一些帮助。提前谢谢

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（this.addClass（'change'）；
})
})

html正文{
保证金：0；
填充：0；
背景色：#3366CC；
}
.main.容器{
边际上限：0；
文本对齐：居中；
填充：5%；
}
.main h1{
颜色：白色；
字体大小：100px；
文本转换：大写；
}
.main h3{
颜色：白色；
字体大小：50px；
}
.main#按钮{
颜色：白色；
背景色：红色；
填充：.5%；
文本对齐：居中；
宽度：10%；
字体大小：25px；
保证金：自动；
}
.改变{
背景色：黑色；
}

社区帮助你的今天
社区
启动一项计划，获得支持，构建您的项目
开始

尝试使用此css

.main #button.change {
    background-color:black;
}

因为你已经习惯了

.main #button {color:white;}

然后单击按钮添加类

。更改

但类

。更改

不适用，因为您的按钮

id

已满您的

。更改

类

这样您就可以在类中满负荷运行而不是使用此

.main#按钮。更改

演示


$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（this.toggleClass（'change'）；
})
})
html正文{
保证金：0；
填充：0；
背景色：#3366CC；
}
.main.容器{
边际上限：0；
文本对齐：居中；
填充：5%；
}
.main h1{
颜色：白色；
字体大小：100px；
文本转换：大写；
}
.main h3{
颜色：白色；
字体大小：50px；
}
.main#按钮{
颜色：白色；
背景色：红色；
填充：.5%；
文本对齐：居中；
宽度：10%；
字体大小：25px；
保证金：自动；
}
.main#button.change{
背景色：黑色；
}

社区帮助你的今天
社区
启动一项计划，获得支持，构建您的项目
开始
.change
样式被
.main#按钮
样式覆盖，这就是为什么不应用黑色背景色的原因。您将看到它正被开发人员工具覆盖。我建议您阅读更多有关CSS的特殊性的内容：
更改
。将
更改为
#按钮。更改
将其作为比
#按钮更高的优先级

像这样：

#button.change {
    background-color:black;
}

并使用
toggleClass
而不是
addClass
来实现切换效果

您最好这样做：

.button {
    color:white;
    background-color:red;
    padding:.5%;
    text-align:center;
    width:10%;
    font-size:25px;
    margin:auto;    
}
.button--changed {
    background-color:black;
}

将css的类直接添加到按钮

然后切换
。按钮更改了类。这会降低你的特异性，你不会再遇到类似的问题

通过增加更多的特殊性，例如通过执行
.main#button.changed
，您只需将相同的问题进一步推迟。想象一下，如果出于某种原因需要添加第二个已更改的状态

此外，您现在不必在main中包含
.button
，就可以使用它的样式，并且通过使用类，您可以有效地重复使用页面上的按钮，但这些都是额外的一点

这里有一些参考资料来进一步解释


更多的具体化并不是最好的解决方案。降低您试图克服的问题的优先级应该始终是CSST的第一个调用端口，这非常有帮助，谢谢！在阅读了这些文章之后，我的结论是我真的应该只使用类选择器是吗？这是一个很好的经验法则，就我个人而言，这就是我使用css的方法：和