我一直在尝试在一个实践网页上添加暗模式，它可以改变身体的背景颜色，但是不工作在按钮上，代码是:
该代码在。icons CSS类上不起作用，它出现在chrome中，但不起作用，
非常感谢您的解释。
谢谢
null
document.querySelector(".slider-button").addEventListener("input", function(){
document.querySelector("#data-left").innerHTML = this.value;
})
document.querySelector(".slider-button").addEventListener("input", function(){
document.querySelector(".gb-left").innerHTML = 1000-this.value;
})
document.querySelector(".button-color-mode").addEventListener("click", function(){
document.body.classList.toggle("darkmode");
document.querySelector(".icons").classList.toggle("darkmode");
})body {
position: fixed;
background-color: hsl(229, 57%, 11%);
background-image: url("images/bg-desktop.png");
background-position: center 400px;
background-repeat: no-repeat;
background-size: cover;
}
.button-color-mode{
background-color: black;
color: white;
outline: none;
border-radius: 15px;
}
.darkmode{
background-color: white;
}
.icons {
background-color: hsl(229, 57%, 11%);
border-style: none;
border-radius: 10px;
width: 50px;
height: 50px;
padding: 10px;
margin: 5px;
outline: none;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" href="images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<title>Fylo Data Storage</title>
</head>
<body>
<button class="icons" type="button"><img src="images/icon-document.svg" alt="" name="button"></button>
<button class="icons" type="button"><img src="images/icon-folder.svg" alt="" name="button"></button>
<button class="icons" type="button"><img src="images/icon-upload.svg" alt="" name="button"></button>
</html>null
在CSS中，选择器的定义顺序很重要。 当一个规则（例如background-color)在多个特定性相同的选择器中定义时，最后定义的一个将覆盖以前的任何定义。
在本例中，.icons{background-color:。。。}是在.darkmode{background-color:。。。}之后定义的，因此，即使也设置了Darkmode类，.icons也会“获胜”。
换句话说:将.darkmode-块移动到.icons-块下面。
