内联样式转外部CSS时style属性被忽略，是因为静态提取工具只能捕获HTML源码中显式存在的style属性，无法处理JS动态设置、框架运行时计算或表达式绑定的样式，需手动补全并注意选择器冲突与优先级问题。
内联样式转外部CSS时，style属性被忽略怎么办
浏览器只解析HTML中显式写的style属性，DOM里动态生成或JS改过的样式不会被静态提取工具捕获。你看到的“转换后样式丢失”，大概率是因为这些样式根本没出现在原始HTML源码里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用浏览器「查看页面源代码」（不是开发者工具的Elements面板），确认
style属性是否真实存在于HTML文本中 - 若依赖JS注入样式（比如
element.style.color = 'red'），这类必须手动补到CSS文件，自动化工具无能为力 - React/Vue等框架的内联样式（如
:style="{ color: textColor }"）属于运行时计算，提取工具只能处理字符串字面量，遇到表达式直接跳过
用css-extract命令行工具快速导出内联样式
它不依赖构建流程，适合一次性清理老项目。但默认行为容易误伤——比如把data-style这种自定义属性也当样式提取。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础用法：
css-extract index.html -o styles.css，会提取所有style属性并去重 - 加
--no-merge保留原始选择器结构，避免合并后覆盖优先级（比如<div style="color:red">和<code><p style="color:red"></p>会被合成div,p{color:red}，可能影响语义） - 若页面用
!important，工具默认丢弃——得加--important参数才能保留 - 在Console里粘贴执行：
[...document.querySelectorAll('[style]')].map(el => `${el.tagName.toLowerCase()} { ${el.getAttribute('style')} }`).join('\n') - 结果是未去重的CSS规则，复制出来后用编辑器正则替换：把
{\s+([^}]+)\s+}替换成{ $1 }，再用Sort Lines插件去重 - 注意：
display: none、visibility: hidden这类隐藏样式也会被拉进来，得人工筛掉 - 给提取出的选择器加前缀，比如用
body .migrated-from-inline div，避免全局污染 - 别直接
@import到主CSS末尾——放在最底部的<link>更可控 - 如果原页面大量用
!important，外部CSS里也得补上，否则优先级立刻掉档
Chrome DevTools里手动复制内联样式太慢？用控制台一行脚本代替
开发者工具的「Computed」面板不能直接导出，但DOM节点上的style属性可以批量读取。手点100个元素不现实，脚本才是真快。
实操建议：
立即学习“前端免费学习笔记（深入）”；
提取后的CSS选择器冲突导致样式错乱
内联样式原本有最高优先级，挪到外部后变成普通CSS规则，很容易被已有样式表覆盖。最典型的是div { color: blue }和提取出的div { color: red }打架。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是提取动作本身，而是内联样式往往混着业务逻辑在跑——比如根据用户角色动态设background-color。这种没法靠工具解决，得翻JS找源头。工具只能处理“写死”的部分。
