insertRule方法的基本调用格式是stylesheet.insertRule("rule", index)，其中rule为完整合法CSS规则字符串，index为插入位置索引（从0开始），成功时返回该索引值，失败则抛出DOMException异常。
insertRule 方法的基本调用格式是什么
insertRule 是 CSSStyleSheet 实例上的原生方法，用于在指定位置插入一条 CSS 规则字符串。它不返回新规则对象，只返回插入后的索引位置（number 类型），失败时抛出 DOMException。
最简调用形式为：stylesheet.insertRule("div { color: red; }", 0)，其中第二个参数是插入位置（从 0 开始），越小越靠前，通常放在最前可覆盖后续同选择器规则。
- 必须传入完整、语法合法的 CSS 规则字符串（含选择器 + 大括号块）
- 位置索引超出当前规则数时，会自动追加到末尾（不会报错）
- 若样式表来自
<link rel="stylesheet">且跨域，cssRules为空，调用insertRule会直接抛出SecurityError - 内联
<style>或 JS 创建的CSSStyleSheet实例一般无跨域限制
为什么 insertRule 有时报错 "Failed to execute 'insertRule' on 'CSSStyleSheet'"
这个错误通常不是语法问题，而是目标 CSSStyleSheet 不可写（disabled === true）或不可访问（cssRules 为 null 或空类数组）。
- 检查
stylesheet.disabled，若为true，先设为false再调用 - 对
<link>样式表，需等待onload或检查sheet.cssRules.length是否可读，否则多数浏览器返回空 - IE11 及更早版本不支持
insertRule，要用addRule（已废弃，仅 IE 支持） - 规则字符串中若含未转义的双引号、换行或注释（如
/* ... */），部分浏览器会静默失败（尤其 Safari）
如何安全地向 document.styleSheets[0] 插入响应式规则
直接操作 document.styleSheets[0] 风险高：它可能是用户代理样式表（不可写），也可能是第三方库注入的样式表。应优先创建独立 <style> 节点并操作其 sheet。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
const style = document.createElement('style');
document.head.append(style);
const sheet = style.sheet;
sheet.insertRule('@media (max-width: 768px) { .header { display: none; } }', 0);- 这样获得的
sheet一定可写、无跨域问题、兼容所有现代浏览器 - 媒体查询规则必须作为完整字符串传入，不能拆成选择器和声明块分别处理
- 若需多次插入，建议缓存
sheet引用，避免重复查 DOM - 注意：Chrome 会把空
<style>的sheet初始化延迟到首次 append 后，所以务必先 append 再取sheet
insertRule 和 replaceRule 有什么区别？能覆盖已有规则吗
insertRule 没有内置的“替换”能力。所谓“覆盖”，实际是靠 CSS 特异性（specificity）和顺序实现的视觉效果，而非删除旧规则。
- 要真正替换某条规则，得先用
deleteRule(index)删除，再用insertRule(rule, index)在同一位置插入 - 无法通过选择器名称查找规则索引 ——
cssRules是只读类数组，遍历时需手动匹配rule.selectorText（仅对CSSStyleRule有效） - 伪类、属性选择器等复杂选择器可能因浏览器解析差异导致
selectorText不一致（如:hover可能被标准化为:HOVER） - 如果只是想动态改样式值（比如改颜色），用
document.documentElement.style.setProperty('--main-color', 'blue')配合 CSS 变量更轻量、更可靠
真正难的不是插入，而是精准定位要删哪条规则、确保新规则的特异性足够高、以及处理好跨浏览器对 cssRules 的读取时机。这些细节不验证就上线，很容易在 Safari 或旧 Edge 上突然失效。
