Question

所以我的网站上有一个按钮可以切换暗模式。我在检查中看到该切换开关有效，但是由于某种原因，没有看到#content .dark-theme。我以为孩子优先。

HTML

<!-- Main Content -->
  <div id="content">

CSS

    #content {
    background: rgb(248, 201, 201);
    color: black;
}

#content .dark-theme {
    background: rgb(49, 51, 71);
    color: white;
}

JS

document.getElementById('change-theme-btn').addEventListener('click', function () {
content.classList.toggle('dark-theme');

}）;

Answer 1

在CSS中的.dark-theme之前删除#content。

Answer 2

更改：

#content .dark-theme {
    background: rgb(49, 51, 71);
    color: white;
}

到

#content.dark-theme {
    background: rgb(49, 51, 71);
    color: white;
}

原因：具有空格，表示：具有“ dark-theme”类的项目，该项目是ID为“ content”的项目的孩子。没有空格，它将变成“具有ID内容且类别为深色主题的项目”。

Answer 3

您应该使用#content.dark-theme来正确定位所需的元素；在这里您可以看到它的作用。

在CSS中，当您编写以下内容时：#content .dark-theme试图使用类dark-theme定位元素，该类是ID为content的元素的子元素。

在您的情况下，您要定位的是元素#content本身；因此您应该写：#content.dark-theme或仅写#content;与此相关，您的目标是元素#content，该元素还具有类dark-theme

document.getElementById('change-theme-btn').onclick = function() {
  content.classList.toggle('dark-theme');
}

#content {
  background: rgb(248, 201, 201);
  color: black;
  height: 150px;
}

#content.dark-theme {
  background: rgb(49, 51, 71);
  color: white;
}

<div id="content">
  This is content
</div>
<button id="change-theme-btn">Change</button>

（黑暗模式）添加“黑暗主题”后如何更改背景？

3 个答案: