javascript - 以编程方式在样式表中创建新的 CSS 规则

Question

对于在样式表中创建新的 CSS 规则，到目前为止，我只知道 .insertRule()(不包括非标准方式)。

还有其他方法可以创建更多 CSS 规则吗？例如:
警告:这不是标准的，这只是一个显示意图的例子

var rule = new CSSStyleRule();
rule.selectorText = '.selector';
rule.style.display = 'block';
rule.style.color = 'red';
ruleSet.append(rule);

任何类似于或有点类似于上述的内容都可以作为答案。它可能不是 new，而是 document.createCssRule() 或 stylesheet.createCssRule()...我只是认为这对我正在开发的软件很有用，如果在这样的界面中有一种编程方式修改值，在其中添加新内容不限于解析的字符串，我就离开了。

回答时请不要担心IE9及以下版本

注意:(打开)这不是关于如何查找和修改当前 CSS 规则，而是关于在不使用文本解析器的情况下创建新规则，这就是 .insertRule() 没有像 .insertRule() 要求的那样构建完整的 CSS 字符串。

Answer 1

可以添加空规则，获取，修改:

function appendRule(sheet) {
  var len = sheet.cssRules.length;
  sheet.insertRule('*{}', len);
  return sheet.cssRules[len];
}
var rule = appendRule(document.styleSheets[0]);
rule.selectorText = '.selector';
rule.style.display = 'block';
rule.style.color = 'red';

<span class="selector">I should become red.</span>
<span>I should be at the next line and not become red.</span>

但是，修改 selectorText 似乎在 Firefox 上不起作用。