在Javascript中切换forEach子div类。（文本的bgcolor正在更改，但这些div的bgcolor没有更改）

为什么大家,

我有这个汉堡菜单行，当我点击它时，我想改变它们的颜色。我尝试了addEventListener+toggle类，也尝试了那些div的simple element.style.backgroundColor（我为所有div添加了相同的类），但在这两种情况下都不起作用。虽然文本颜色正在更改，但这些div的背景色不会更改）。下面是代码

多谢各位

const hamburgerMenu=document.querySelector（“.hamburger菜单”）；
const hamburgerMenuLines=document.queryselectoral（“.hamburger menu div”）；
hamburgerMenu.addEventListener（'单击'，（）=>{
//（打开菜单全屏的代码，工作正常）
HamburgerManualines.forEach（（行）=>{
line.classList.toggle（“changemburgermenulinescolor”）；
});
});
。汉堡包菜单div{
宽度：100%；
高度：2倍；
边界半径：30%；
背景色：黑色；
位置：相对位置；
利润上限：11px；
}
.changeHamburgerMenuLinesColor{
背景色：白色；
颜色：白色；
}

正文
正文
正文
问题是由于。
当两个选择器在一个元素上应用相同的样式时，具有更多特定性的选择器优先

div.changeHamburgerMenuLinesColor {
   background-color: white;
   color: white;
}

在您的情况下，
.hamburger menu div
是比
更具体的选择器。changeHamburgerMenuLinesColor
，因此使用第一个选择器设置的背景色，即“黑色”，将应用于每个
div
元素

要解决这个问题，需要增加第二个选择器的特殊性。如下图所示写入第二个选择器将使两个选择器的特异性相等，随后按从上到下的顺序出现的选择器将优先

div.changeHamburgerMenuLinesColor {
   background-color: white;
   color: white;
}

提示：浏览器开发工具为调试此类问题提供帮助。花点时间学习如何利用它们为你带来好处