感谢某人的帮助，我在JS中在列表的所有元素旁边添加了一个删除按钮，然而我尝试在CSS中自定义它，但它没有改变。例如，我如何将其背景颜色更改为蓝色？
下面是我的代码：

//Définir la variable tasks et la garder (tâche entrée par l'utilisateur) //
var tasks = JSON.parse(localStorage.getItem("memtasks")) || [];

//Mettre la tâche entrée dans la liste//
function addTaskToDOM(task) {
  var ul = document.getElementById("liste");
  var li = document.createElement("li");

  //Définir la variable du bouton supprimer//
  var deleteButton = document.createElement("button");
  deleteButton.textContent = "Supprimer";
  deleteButton.addEventListener("click", (e) =>
    deleteTask(e.target.closest("li"))
  );

  li.appendChild(task);
  li.appendChild(deleteButton);
  ul.appendChild(li);
}

//Définir la variable "supprimer" et remettre à jour le storage//
function deleteTask(task) {
  task.remove();
  tasks = Array.from(document.querySelectorAll("#liste li")).map(
    (li) => li.childNodes[0].textContent
  );
  localStorage.setItem("memtasks", JSON.stringify(tasks));
}

//Récupérer la tâche entrée//
function répondre() {
  console.log("test", tasks);
  var task = document.getElementById("new-task").value;

  if (!task) {
    return;
  }

  tasks.push(task);
  addTaskToDOM(document.createTextNode(task));
  localStorage.setItem("memtasks", JSON.stringify(tasks));
  document.getElementById("new-task").value = "";
}

for (let i = 0; i < tasks.length; i++) {
  addTaskToDOM(document.createTextNode(tasks[i]));
}

//Définir la variable list (tout ce qu'il y'a dans la liste)//
var list = document.querySelector("ul");
list.addEventListener(
  "click",
  function(ev) {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("checked");
    }
  },
  false
);
console.log(list)

/*Customiser la todo-list*/

#todo-list {
  width: 15%;
  cursor: pointer;
  min-width: 300px;
  max-width: 700px;
  border: 1px solid #eee;
  padding: 20px 20px 20px 50px;
  background: #eee;
  font-size: 18px;
  transition: 2s;
  line-height: 2em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*Customiser la date*/

#date {
  margin: auto;
  width: 13%;
  border: 1px solid #73ad21;
  padding: 10px;
  background-color: #6495ed;
}

/*Faire changer de couleur l'objet dans la liste quand la souris passe dessus*/

ul li:hover {
  background: #ddd;
}

/*Rayer l'objet de la liste (sans l'enlever)quand l'objet est cliqué*/

ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/*Customiser la partie du haut (tout ce qui est en haut de la ligne)*/

#main_header {
  background-color: #0d1625;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/*Customiser le bouton OK*/

#addBtn {
  background: #d9d9d9;
  color: #555;
  float: 10px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border: none;
}

/*Faire changer de couleur le bouton OK quand la souris passe dessus*/

#addBtn:hover {
  background-color: #bbb;
}

/*Faire changer de couleur la barre de recherche quand la souris passe dessus*/

#new-task:hover {
  background-color: #bbb;
}

/*Definir la taille de la barre de recherche*/

#new-task {
  width: 700px;
  height: 45px;
}

/*Définir la localisation de la barre de recherche, la couleur de son arrière-plan, rendre ses coins arrondis, mettre du padding et définir le temps de transition*/

#new-task {
  top: 25px;
  left: 50%;
  background: #e7e9eb;
  border-radius: 40px;
  padding: 10px;
  transition: 0.4s;
}

/*Définir la couleur du bouton OK, sa localisation, le rendre arrondi, définir sa couleur d'arrière-plan, centrer son texte, mettre une transition et définir la couleur de son texte*/

#addBtn {
  color: #eeeeee;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  align-items: center;
  transition: 0.4s;
  color: white;
}

/*Faire changer de taille la barre de recherche quand la souris passe dessus*/

#new-task:hover {
  width: 750px;
  height: 50px;
}

/*Faire changer de taille le bouton OK quand la souris passe dessus*/

#addBtn:hover {
  width: 45px;
  height: 45px;
}

.deleteButton {
  width: 100px;
  background: #2f3640
}

!--Définir la partie du haut (Titre, Sous-titre,barre de recherche, et bouton OK)-->
<div id="main_header" class="header">
  <h1>Titre</h1>
  <h3>Sous-titre</h3>
  <input type="search" id="new-task" placeholder="Ajouter une tâche..." />

  <!--Toujours dans le même div, définir le bouton OK et sa fonction-->
  <button onclick="répondre()" id="addBtn"> OK </button>
</div>

<!--Définir la liste de tâches et son ul -->
<hr />
<div id="todo-list">
  <h2>Todo list</h2>
  <ul id="liste" </ul>
</div>

<!--Définir la date-->
<div id="date">
  <input type="datetime-local" value="2023-03-29T11:30" disabled="true" min="2018-06-07T00:00" max="2023-06-14T00:00">
  <div />

对不起，如果评论是在法国。问题是：

.deleteButton{
  width: 100px;
  background: #2f3640
}

因为背景颜色不变