CSS 转内联样式
本地运行，数据不上传服务器
CSS 规则如 @media 和 :hover 不会被内联。
使用说明
做邮件模板时，Gmail、Outlook 对 `<style>` 标签和 class 支持都不稳定，必须把样式写到元素的 style 属性里才生效；把内容粘贴到企业 CMS 或富文本编辑器时，外部样式表直接失效，得手动把每条样式补进标签；给第三方平台交付 HTML 片段，对方要求不引用任何 CSS 文件。 这个工具把 HTML 和 CSS 一起输入，按选择器匹配规则，把样式写入对应元素的 style 属性，保留元素原有 style 并覆盖冲突属性。输出是完整的内联样式 HTML，可以复制或下载。 适合邮件模板、富文本内容、微信/钉钉卡片、第三方平台组件、需要兼容性 HTML 的场景。命中元素数量会显示出来，方便确认选择器是否生效。
核心功能
- ✓按 CSS 选择器把规则写入 HTML 元素的 style 属性
- ✓支持标签、class、ID 等常见选择器
- ✓保留元素原有 style，冲突时按优先级覆盖
- ✓显示命中元素数量，确认选择器是否生效
- ✓输出完整 HTML，可复制或下载
- ✓适合邮件模板、CMS 富文本、第三方平台组件
- ✓在浏览器本地处理，不上传内容
使用教程
做兼容性邮件模板：把邮件 HTML 和 CSS 一起贴进来，转换后复制完整 HTML，粘贴到邮件编辑器里发出，Gmail 和 Outlook 都能正常显示。 处理 CMS 富文本：从设计稿整理出 HTML + CSS，内联后粘贴到 CMS 编辑器，样式不会被平台过滤。 给第三方平台交付组件：对方要求不引用外部 CSS 时，用这个工具生成内联版本再交付。 排查选择器是否命中：转换后看命中元素数量，和预期不一致就检查选择器写法或 HTML 结构。 保留原有样式：元素本身已有 style 时会被保留，冲突的属性按简化优先级覆盖，避免丢失重要样式。
常见问题
Q：CSS 转内联样式支持 `@media` 吗？
A：不支持，`@media`、`@keyframes`、`@supports` 这类块级规则会被忽略，需要手动处理。
Q：支持 `:hover` 等伪类吗？
A：不支持，伪类状态无法直接写入 style 属性，需要在邮件客户端用支持的写法单独处理。
Q：支持复杂选择器吗？
A：只支持标签、class、ID 等可以实现内联的常规选择器，组合选择器和后代选择器可能无法完整模拟。
Q：转换后样式为什么和浏览器显示的不完全一致？
A：工具按简化优先级处理，无法完全模拟浏览器级联、继承和优先级规则。
Q：转换失败怎么办？
A：检查 HTML 和 CSS 是否完整，尤其是引号、花括号是否配对。
Q：内容会上传服务器吗？
A：不会，转换在浏览器本地完成。
Q：适合做完整的 CSS 打包吗？
A：不适合，这个工具专注把样式转为内联，不需要内联的场景建议直接用样式表。