直接在HTML中用标签写CSS最省事，适合快速验证样式；也可用JS动态插入或在开发者工具中实时编辑；但仅限调试，避免污染生产代码。
直接在 HTML 里加
不用起本地服务、不碰构建工具，改完立刻生效。把 放在 里（或紧贴 开头），浏览器会同步解析并应用样式。
- 优先级高于外部 CSS 文件（除非用
!important或更具体的选择器覆盖） - 修改后刷新页面即可看到效果，适合调颜色、间距、显示/隐藏等快速验证
- 注意别写错选择器——比如想改
.btn却写了btn（漏了点），样式不会生效
用 document.styleSheets 动态插入更灵活
如果页面已加载，又不想刷新，可以用 JS 直接注入样式规则。适合反复试多个值、或者调试动态生成的 DOM 元素。
const style = document.createElement('style');
style.textContent = `
.modal { border: 2px solid red !important; }
[data-test="true"] { background: yellow; }
`;
document.head.appendChild(style);- 支持模板字符串，方便拼接变量（比如循环生成一组颜色测试）
- 插入后立即生效，但要确保目标元素已存在 DOM 中
- 多次执行会插入多条
，记得先remove()旧的，避免样式污染
浏览器开发者工具里改
在 Elements 面板里右键任意元素 → “Edit as HTML”，然后手动加一个 块，或者直接在已有的 里编辑内容。改完回车就实时渲染。
- 改完不保存，关掉标签页就消失，完全无副作用
- 可以配合“Computed”面板看最终生效的值，确认是否被其他规则覆盖
- 如果页面用了 Shadow DOM，得切到对应 shadow root 下再加
，否则样式不作用
临时样式别提交到代码库的几个信号
一旦出现以下情况，说明该收手了——这些只是调试手段，不是长期方案：
立即学习“前端免费学习笔记（深入）”；
-
标签里出现大量重复规则（比如十几个.item-1到.item-20的边框测试） - JS 动态插入的
style没有清理逻辑，导致切换页面后样式残留 - 用
!important解决本可通过提高选择器特异性解决的问题 - 在生产环境的 HTML 源码里留着注释如
真正卡住的往往不是怎么加样式，而是没及时识别出：哪些是布局逻辑问题，哪些是 CSS 层叠顺序问题，哪些其实是 JavaScript 没触发 class 切换 —— 这些光靠 是盖不住的。
