必须确保外部样式表加载完成且同源才能安全操作cssrules；使用link.onload监听就绪，兼容写法为sheet.cssrules||sheet.rules，通过sheet.href校验目标样式表，禁用用sheet.disabled=true更安全；insertrule和deleterule索引需动态维护，追加用length，删除前须校验索引有效性。
能直接操作引入的样式表，但必须满足同源限制，且外部样式表的 cssRules 在未加载完成或跨域时为空或抛错——这不是 bug，是浏览器安全策略强制行为。
如何安全获取 document.styleSheets 中的外部样式表规则
外部样式表（<link rel="stylesheet">）只有在加载完成、解析完毕后，其 cssRules 才可读。未完成时访问会返回空集合或抛 SecurityError（跨域）或 NotSupportedError（未就绪）。
- 用
link.onload或link.addEventListener('load', ...)确保样式表已就绪再操作 - 始终用兼容写法获取规则：
sheet.cssRules || sheet.rules，IE 仅支持rules - 检查
sheet.href匹配目标路径，避免误操作第三方样式表（如 CDN 上的 Bootstrap） - 对
sheet.disabled = true比直接删规则更轻量，适合临时禁用整张表
insertRule 和 deleteRule 的位置索引怎么算才不越界
insertRule(rule, index) 的 index 是插入位置，不是替换；deleteRule(index) 的 index 是待删规则在当前 cssRules 中的下标（从 0 开始）。一旦规则被删，后续索引立刻偏移。
- 追加规则：用
sheet.insertRule('div { color: red; }', sheet.cssRules.length) - 插入到开头：用
sheet.insertRule('...', 0) - 删除前务必确认规则存在：
if (index - 批量删规则时，倒序遍历（从高索引往低索引删），避免索引错位
为什么修改 cssRules.style.color 没生效，但改 background-image 却可以
CSS 规则对象（CSSStyleRule）的 style 属性是只读的“快照”，直接赋值如 rule.style.color = 'blue' 不触发重绘，也不写入规则体；但读取是允许的。真正生效的写法是重新插入整条规则。
- ✅ 正确做法：先用
rule.cssText提取原规则字符串，正则替换属性值，再用insertRule插入新规则 +deleteRule删除旧规则 - ⚠️ 注意
cssText返回的是完整字符串（含选择器），不能只改其中某个声明 - ❌
rule.style.setProperty('color', 'red')对cssRules中的规则无效，该方法只适用于element.style或CSSStyleDeclaration实例 - ? 替代方案：优先用 CSS 变量（
:root { --main-color: blue; }），JS 改document.documentElement.style.setProperty('--main-color', 'red')，更可靠也更易维护
动态插入规则后，为何某些选择器不匹配或优先级异常
通过 insertRule 添加的规则，其层叠顺序由插入位置决定，而非书写顺序或文件加载顺序。它严格按 cssRules 数组索引升序参与计算，且受 specificity 影响不变。
- 插入位置靠前（低 index）的规则，可能被后面高 specificity 的规则覆盖，即使它“后插入”
- 不要依赖插入顺序模拟 !important 效果；真要提升优先级，得加类名、用内联 style，或提高选择器 specificity（如
body .container button） - 插入含
@media或@keyframes的规则需用对应接口：sheet.insertRule('@media (min-width: 768px) { ... }', i)是合法的，但不能塞进普通CSSStyleRule里 - 调试建议：Chrome DevTools → Elements → Styles 面板中右键某元素 → “Show all matches”，查看哪条规则最终胜出
最常被忽略的是：外部样式表的 cssRules 在页面生命周期中可能多次变为 null（比如动态切换主题时 reload link），每次操作前都应重新校验可用性，而不是缓存 document.styleSheets[0] 一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
