最直接的方式是在页面中临时添加<style>标签写CSS规则，无需修改外部文件；优先级高于外部样式，可快速覆盖默认样式并实时调试，但需测试后及时删除。

想快速验证某个元素的样式效果，最直接的方式就是在页面中临时添加 <style> 标签，写上对应的 CSS 规则，无需修改外部文件或构建流程。

在 HTML 中插入 style 标签

打开浏览器开发者工具（F12），切换到 Elements 面板，右键目标元素所在 HTML 节点 → “Edit as HTML”，在 <head> 或紧贴 <body> 开头处插入：

<style>
  .my-btn { background: #007bff; color: white; border-radius: 4px; }
  .my-btn:hover { background: #0056b3; }
</style>

保存后样式立即生效，适合调试布局、颜色、间距等视觉表现。

Smart Ledger

智能收支追踪器 — 通过自然语言快速记账，自动分类，生成日/周/月报告和趋势分析。 支持中文自然语言输入("今天午饭花了35元")，数据本地JSON存储保护隐私。 适用于个人财务管理、预算追踪和消费分析场景。

下载

优先级高，覆盖默认样式

<style> 标签内的规则属于内部样式表，优先级高于外部 CSS 文件中的同名选择器（除非外部用了 !important）。这意味着：

• 不用反复清理缓存或重启服务
• 可精准覆盖框架默认样式（如 Bootstrap 的按钮、表格）
• 调试时能快速判断是样式没生效，还是被其他规则覆盖了

配合开发者工具动态调整

更高效的做法是：先在 Elements 面板中选中元素，点击右侧 Styles 标签页，在顶部点击 “+” 号新建一个 <style> 块（Chrome/Edge 支持），然后直接输入 CSS。所有修改实时可见，刷新即消失，完全无副作用。

注意作用域和清理

临时样式只对当前页面有效，但别忘了测试完及时删掉 <style> 标签——尤其在多人协作或上线前检查时，残留的调试代码可能影响后续维护。建议加个注释方便识别：

<!-- DEBUG: 临时样式，上线前删除 -->
<style>
  .debug-highlight { outline: 2px solid red; }
</style>