如何通过JavaScript移除CSS文件中指定的选择器样式

由于浏览器安全限制，无法直接修改外部CSS文件的内容，我们可以通过以下两种方式实现“移除目标样式”的需求：

方案一：新增覆盖类（推荐） #

这种方式兼容性好，且不受跨域样式表限制：

1. 先在CSS中新增一个用于重置样式的类：

.debtor-content label[for=amount].remove-insufficient-hint::after {
  content: none; /* 清除伪元素内容 */
  position: static; /* 重置定位为默认值 */
  /* 可根据需要重置其他属性，比如padding、margin等为初始值 */
}

2. 在JavaScript中，给已匹配到的DOM元素添加这个类：

// 假设你已经获取到目标元素
const targetLabel = document.querySelector('.debtor-content label[for=amount]');
targetLabel.classList.add('remove-insufficient-hint');

方案二：直接删除样式表中的规则 #

如果目标样式在同源的样式表中，可以遍历样式表找到对应规则并删除：

const targetSelector = '.debtor-content label[for=amount]::after';

// 遍历页面所有样式表
for (const sheet of document.styleSheets) {
  try {
    // 倒序遍历规则，避免删除后索引混乱
    for (let i = sheet.cssRules.length - 1; i >= 0; i--) {
      const rule = sheet.cssRules[i];
      if (rule.selectorText === targetSelector) {
        sheet.deleteRule(i);
        break; // 找到目标规则后退出循环
      }
    }
  } catch (err) {
    // 跨域样式表会触发安全异常，直接跳过
    continue;
  }
}

注意：如果CSS文件来自跨域地址（比如CDN），这种方法会因为浏览器同源策略无法读取样式规则，此时只能用方案一。

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