当我使用Javascript时，ID正在接管我的类

这个问题我已经坐了两个小时了。我想做的是一个网站，你按下一个按钮，它就会改变颜色。我知道这可以通过CSS实现，但我对此不感兴趣

主要的问题是当我按下按钮时，什么也没发生。。但是，如果我从css中删除“#sug”，一切都会完美地工作。。。所以我想做的是，在一开始就让布局非常基本，所以除了黑色背景之外，没有其他东西，当我按下按钮时，它应该会切换

另外，我知道您可以在按钮标记中实现

onclick

，但这也不是我想要的。我想知道为什么会发生这种情况，以及如何解决这个问题

以下是我的javascript、CSS和HTML代码：

window.onload=设置；
函数设置（）{
document.getElementById（“normal”）.onclick=setNormalStyle；
document.getElementById（“疯狂”）.onclick=setCoolStyle；
document.getElementById（“疯狂”）.onclick=setInAseanStyle；
}
函数setNormalStyle（）{
var messageBox=document.getElementById（“sug”）；
messageBox.className=“正常”；
}
函数setCoolStyle（）{
var savingTheSecondVar=document.getElementById（“sug”）；
savingTheSecondVar.className=“酷”；
}
函数setInAssetStyle（）{
var savingTheThirdVar=document.getElementById（“sug”）；
savingTheThirdVar.className=“疯狂”；
}

#sug{
背景色：黑色；
}
.正常{
高度：500px；
背景颜色：蓝色；
颜色：白色；
填充：30px；
保证金：自动；
宽度：500px；
}
.疯了{
高度：500px；
背景颜色：绿色；
填充：30px；
保证金：自动；
宽度：500px；
颜色：白色；
}
.酷{
高度：500px；
背景色：红色；
填充：30px；
保证金：自动；
宽度：500px；
颜色：白色；
}

我的第一个Javascript项目
欢迎来到这个Javascript站点！

文本

第一种风格
第二种风格
第三种风格

这是因为id优先于类。您需要这样指定它：

#sug.cool { background: red; }

---

等等。

这是因为id优先于类。您需要这样指定它：

#sug.cool { background: red; }

---

等等。

问题在于你的CSS

#sug{
   background-color: black;
}

重写类的背景色，因为它是更特定的选择器（即id选择器）

在css中更改其余的类以包含id，如

#很正常、很疯狂、很酷等等

---

这里有一篇关于CSS特性的好文章，可以帮助您了解更多内容：

问题在于您的CSS

#sug{
   background-color: black;
}

重写类的背景色，因为它是更特定的选择器（即id选择器）

在css中更改其余的类以包含id，如

#很正常、很疯狂、很酷等等

---

这里有一篇关于CSS特性的好文章，可以帮助您了解更多内容：

您没有删除按钮CSS onClick（）事件中的#sug id提供的背景色。 Id比类更优先

使用下面的代码是一个好习惯，因为类之间有空格，如果您想添加多个类，可以使用下面的代码

messageBox.className += " " + "normal";

---

您没有删除按钮的CSS onClick（）事件中的#sug id提供的背景色。 Id比类更优先

使用下面的代码是一个好习惯，因为类之间有空格，如果您想添加多个类，可以使用下面的代码

messageBox.className += " " + "normal";

---

ID规则将否决类规则。CSS就是这样工作的关于这个主题的一篇很好的文章现在事实上的标准是完全不使用CSS的ID，只用于javascript。我倾向于同意@ippi。#sug选择器目前有两个任务：告诉setXStyle函数要更改哪个元素，以及告诉外部div它需要以黑色背景开始。我会将#sug更改为具有新名称的点选择器，并使其成为外部div的唯一类。ID规则将否决类规则。CSS就是这样工作的关于这个主题的一篇很好的文章现在事实上的标准是完全不使用CSS的ID，只用于javascript。我倾向于同意@ippi。#sug选择器目前有两个任务：告诉setXStyle函数要更改哪个元素，以及告诉外部div它需要以黑色背景开始。我会将#sug更改为具有新名称的点选择器，并使其成为外部div的唯一类。