在Javascript中切换forEach子div类。(文本的bgcolor正在更改，而那些div的bgcolor则没有)

Question

大家好，

我有这个汉堡包菜单线，我想改变他们的颜色，当我点击它。我尝试使用addEventListener +切换类，对于那些div也使用简单的element.style.backgroundColor (我为所有的div添加了相同的类)，但在这两种情况下都不起作用。虽然，文本的颜色在变化，但是那些div的背景色没有变化)。下面是密码。

非常感谢。

​

const hamburgerMenu = document.querySelector(".hamburger-menu");
const hamburgerMenuLines = document.querySelectorAll(".hamburger-menu div");

hamburgerMenu.addEventListener('click', () => {
  // (code to open menu fullscreen which works fine)
  hamburgerMenuLines.forEach((line) => {
    line.classList.toggle("changeHamburgerMenuLinesColor");
  });
});

.hamburger-menu div {
  width: 100%;
  height: 2px;
  border-radius: 30%;
  background-color: black;
  position: relative;
  margin-top: 11px;
}

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

<div class="hamburger-menu">
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

​

Answer 1

问题是因为CSS specificity。当两个选择器对一个元素应用相同的样式时，具有更多特异性的选择器优先。

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

要解决这个问题，您需要增加第二个选择器的特殊性。如下图所示，编写第二个选择器将使两个选择器的特异性相等，而后面按自上而下顺序排列的选择器将优先。

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

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