如何用JavaScript移除指定选择器的所有CSS样式且保留类名？

核心问题 #

原有类需保留（用于JavaScript逻辑），但外部样式表的原有类样式会覆盖自定义类样式，不想通过大量添加!important来解决。

解决方案 #

方法1：提升自定义类的CSS选择器优先级 #

利用CSS选择器的特异性规则，将自定义类与原有类组合，让选择器优先级高于单个原有类，无需!important即可覆盖样式。

示例代码：

/* 组合原有类与自定义类，优先级高于单个原有类 */
.original-class-1.original-class-2.my-styles {
  color: #fafafa;
  background-color: #090909;
  border: 1px solid;
}

/* 覆盖伪状态样式（如hover、focus） */
.original-class-1.my-styles:hover,
.original-class-1.my-styles:focus {
  color: #fafafa;
  background-color: #090909;
  /* 根据需求添加其他伪状态样式 */
}

方法2：使用all: unset快速重置样式 #

用all: unset属性一键重置元素的所有继承/默认样式，再重新定义自定义样式，避免逐个覆盖原有属性。

示例代码：

.my-styles {
  all: unset; /* 清空所有原有样式（包括伪状态的继承样式） */
  /* 重新定义自定义样式 */
  color: #fafafa;
  background-color: #090909;
  border: 1px solid;
  cursor: pointer; /* 补回按钮默认交互样式 */
  padding: 8px 12px; /* 自定义内边距 */
}

/* 自定义伪状态样式 */
.my-styles:hover {
  background-color: #1a1a1a;
}

关于你提到的JavaScript方法 #

不存在button.style.removeAllProperties()这个API，但可以用button.style.cssText = ''清空元素的行内样式——不过这对外部样式表中的原有类样式无效，因为原有类样式是通过外部样式表加载的，并非行内样式。

如果想用JS辅助实现，推荐动态插入高优先级的CSS规则，再给元素添加自定义类：

// 动态创建样式标签并插入高优先级规则
const customStyle = document.createElement('style');
customStyle.textContent = `
.original-class-1.original-class-2.my-styles {
  color: #fafafa;
  background-color: #090909;
  border: 1px solid;
}
.original-class-1.my-styles:hover {
  background-color: #1a1a1a;
}
`;
document.head.appendChild(customStyle);

// 给目标按钮添加自定义类
const buttons = document.querySelectorAll('.original-class-1');
buttons.forEach(btn => btn.classList.add('my-styles'));

总结 #

优先选择CSS层面的解决方案（提升优先级或all: unset），比使用大量!important或复杂JS操作更简洁易维护。

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