如何正确使用CSSStyleSheet.insertRule（）？

这有点令人困惑，但是您的代码确实可以工作，只是您看不到返回的XML树中插入的规则。

为了验证您的代码是否有效，您可以执行两个测试：

var style = (function() {    // Create the <style> tag    var style = document.createElement("style");    // WebKit hack    style.appendChild(document.createTextNode(""));    // Add the <style> element to the page    document.head.appendChild(style);    console.log(style.sheet.cssRules); // length is 0, and no rules    return style;})();style.sheet.insertRule('.foo{color:red;}', 0);console.log(style.sheet.cssRules); // length is 1, rule added<p >  I am some text</p>

运行上面的代码片段，您可以看到CSS规则确实适用。并且

cssRules

当浏览器扩展生成附加到DOM的自定义样式表时，以及在调试时它们在检查器中显示为空样式表时，通常会注意到这一点。