比开发者工具更可靠，因其能真实模拟线上环境的样式加载顺序、优先级和作用域，尤其适用于调试优先级冲突、响应式断点及scoped样式穿透。
直接在页面里改CSS，为什么<style></style>比开发者工具更可靠
因为开发者工具里改的样式只是临时覆盖，刷新就丢；而往 DOM 里动态插入 <style></style> 标签，能真实模拟线上环境下的样式加载顺序、优先级和作用域。尤其当你在调试 CSS 优先级冲突、@media 响应式断点、或第三方组件库的 scoped 样式穿透时，手动注入 <style></style> 是唯一能复现并验证修复效果的方式。
常见错误现象：!important 在 DevTools 里生效，但写进源码却无效——大概率是样式加载时机或层叠顺序不同，靠 <style></style> 插入就能对齐真实流程。
- 插入位置很重要：必须插在目标元素所在 DOM 节点之后，或至少在所有相关样式表之后（可用
document.head.appendChild()或el.after(styleEl)） - 避免重复插入：每次调试前先用
document.querySelectorAll('style[data-debug]')清掉旧的，否则样式会越叠越多 - 注意 CSSOM 更新延迟：插入后若立即 getComputedStyle，可能拿不到最新值，可加
requestAnimationFrame等一帧
document.createElement('style') 的最小可行写法
别套模板，三行足够：
const style = document.createElement('style');
style.textContent = `.my-btn { background: red !important; }`;
document.head.appendChild(style);
关键点不在语法，而在内容组织：
立即学习“前端免费学习笔记（深入）”；
-
textContent比innerHTML更安全，不会触发 HTML 解析（比如你写{ content: "→" }不会出错） - 不要漏写分号——虽然 CSS 通常可省，但某些属性（如
content）含特殊字符时，不加分号可能导致解析中断 - 如果要支持 IE11，
style.textContent不生效，得用style.styleSheet.cssText回退
调试 scoped 组件（Vue/Shadow DOM）时<style></style>怎么写才生效
普通 <style></style> 插入默认是全局作用域，对 <style scoped></style> 或 Shadow Root 内的元素不起作用——不是选择器写错了，是作用域隔离了。
两种解法：
- Vue 单文件组件中，临时删掉
scoped属性，再插入调试<style></style>；或者用深度选择器：.parent :deep(.child) { color: blue; } - Shadow DOM 场景下，不能往
document.head插，得插到对应shadowRoot里：host.shadowRoot.appendChild(style) - React 中若用 emotion/styled-components，直接插
<style></style>也可能被 CSS-in-JS 的插入顺序覆盖，建议先查document.styleSheets看它插在哪一层，再确保你的<style></style>排在它后面
改完样式后，怎么快速判断是否真生效了
别只看渲染结果，容易被缓存、继承或父级 transform 干扰。最稳的方法是查计算样式：
getComputedStyle(document.querySelector('.target')).backgroundColor
但要注意：
- 返回值永远是 RGB 或关键字（如
"rgb(255, 0, 0)"），不是原始声明值，所以别拿它跟"red"直接比 - 如果元素未渲染（
display: none或不在视口），getComputedStyle仍返回样式，但无法反映真实绘制行为 - 动画中属性（如
transform）需用getPropertyValue('transform')，因为getComputedStyle返回的是矩阵，不是原始值
复杂点在于：样式生效 ≠ 表现正确。比如 z-index 生效了，但父容器没定位，照样压不住；又比如 flex 子项设了 width，却被 flex-shrink 拉垮——这些都得结合盒模型和布局上下文一起看，光改 <style></style> 解不了。
