JS动态创建的删除按钮CSS样式不生效，如何修改其背景色？

针对你遇到的.deleteButton背景色无法生效的问题，按以下步骤排查解决：

1. 提升选择器优先级 #

浏览器默认的按钮样式（user agent stylesheet）优先级可能高于你的自定义类选择器，试试使用更具体的选择器：

button.deleteButton {
  background-color: blue;
  /* 同时重置可能冲突的默认属性 */
  border: none;
  color: #fff;
  padding: 4px 8px;
  cursor: pointer;
}

如果临时想验证是否是优先级问题，可以加!important测试（不推荐长期使用，仅用于排查）：

.deleteButton {
  background-color: blue !important;
}

2. 确认JS代码的类名添加是否正确 #

检查你创建按钮的JS代码，确保类名拼写完全一致，没有大小写或空格错误：

// 示例正确写法
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Supprimer'; // 对应你的法语注释
deleteBtn.classList.add('deleteButton'); // 这里必须确保类名无拼写错误

打开浏览器开发者工具（F12），选中按钮元素，在Elements面板里查看类名是否正确加载。

3. 重置浏览器默认按钮外观 #

部分浏览器会给按钮添加默认的appearance样式，导致自定义背景色不生效，添加以下属性重置：

.deleteButton {
  background-color: blue;
  appearance: none;
  -webkit-appearance: none; /* 兼容Chrome、Safari等webkit内核浏览器 */
  border: 0;
}

4. 检查CSS加载状态 #

确认你的CSS文件已正确引入HTML，或者内联<style>标签没有语法错误。在开发者工具的Styles面板中，查看.deleteButton规则是否被划掉（划掉表示该样式被覆盖或无效）。

内容的提问来源于stack exchange，提问作者Thomas Reyne