嘿，我明白你的困惑了——你现在用document.querySelector(".winner")（对了，你之前写的代码漏了类选择器的.，得补上哦）拿到的是带有winner类的DOM元素，但你想要的是直接修改这个CSS类本身的样式，这样所有使用该类的元素都会自动同步更新，对吧？这和修改单个元素的内联样式完全是两回事，我来一步步给你讲清楚怎么做。

核心思路：找到CSS类对应的样式规则 #

页面上的CSS规则都存放在document.styleSheets这个集合里，我们需要遍历这些样式表，找到目标类名对应的规则，然后直接修改它的样式属性。

方法一：遍历现有样式表修改规则 #

你可以写一个函数来自动查找并修改目标类的样式：

function updateClassStyle(className, prop, value) {
  // 遍历页面上所有的样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历当前样式表中的每一条规则
      for (const rule of sheet.cssRules) {
        // 检查规则的选择器是否包含我们要找的类名（注意类名前面要加.）
        if (rule.selectorText && rule.selectorText.includes(`.${className}`)) {
          // 修改对应的样式属性
          rule.style[prop] = value;
          // 如果只需要修改第一个匹配的规则，直接返回即可
          return;
        }
      }
    } catch (e) {
      // 跨域加载的外部样式表会触发安全错误，直接跳过即可
      continue;
    }
  }
}

// 调用示例：把.winner的背景色改成绿色
updateClassStyle("winner", "backgroundColor", "#2ecc71");

注意事项

• 如果你的CSS是从其他域名加载的外部样式表，浏览器会出于安全限制禁止访问它的cssRules，这种情况这个方法就失效了，得用下面的替代方案。
• 如果同一个类名在多个样式表中有规则，这个函数会修改第一个匹配到的规则，如果你需要修改所有匹配的规则，去掉return语句就行。

方法二：动态添加新样式覆盖原有规则 #

如果遍历样式表太麻烦，或者遇到跨域样式表的问题，你可以直接创建一个新的<style>标签，插入到页面中，用新的样式规则覆盖原来的：

// 创建一个新的style元素
const newStyle = document.createElement('style');
// 写入新的.winner样式规则，!important确保优先级足够高
newStyle.textContent = `.winner { background-color: #ff6b6b !important; }`;
// 把style元素添加到页面的head里
document.head.appendChild(newStyle);

这个方法更简单粗暴，而且不受跨域限制，唯一需要注意的是样式优先级——如果原有规则有更高的优先级（比如行内样式或者更具体的选择器），可能需要加上!important来确保覆盖成功。

最后再区分一下两种操作的差异 #

• 修改单个DOM元素的样式：element.style.backgroundColor = "red"，只会改变这个元素的样式，其他带winner类的元素不受影响。
• 修改CSS类本身的样式：就是上面两种方法，所有使用winner类的元素都会自动应用新的样式，这才是你想要的效果~

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