用套内联样式最直接，html不支持同一行文字分色，必须用包裹需变色部分并设style=”color:…”；推荐十六进制或命名色，避免废弃标签及块级元素强行行内化。
用 <span></span> 套内联样式最直接
HTML 本身不支持同一行文字分色，必须靠嵌套容器切分。最常用也最稳妥的方式就是用 <span></span> 包住需要变色的部分，各自加 style="color: ..."。
常见错误是试图在 <p></p> 或 <div> 上设两个颜色，结果整块都统一了；或者误用 <code><font color="..."></font>（已废弃，现代浏览器虽可能渲染但不可靠）。
<p>这句话<code><span style="color: red;">红色部分</span>，其余是默认黑- 颜色值支持
red、#ff0000、rgb(255, 0, 0)，推荐用十六进制或命名色，兼容性最好 - 不要给
<span></span>加display: block或其他布局属性，否则可能破坏行内流
用 CSS 类替代内联样式更利于维护
如果同一套配色反复出现（比如“成功”总绿、“错误”总红），硬写 style 会重复且难改。抽成 CSS 类是更实际的做法。
立即学习“前端免费学习笔记（深入）”；
使用场景：项目里有多个地方要输出“操作成功：已保存”，其中“已保存”固定绿色，“操作成功：”保持默认或灰色。
- 在
或外部 CSS 中定义：.text-success { color: #28a745; } - HTML 中写：
<p>操作成功：<code><span class="text-success">已保存</span> - 避免类名用
red/blue这类纯视觉命名，改用语义化名称（如text-Error），方便后期换主题色
别用 <div> 或 <code><p></p> 强行换行或分色
有人为了“省一个 <span></span>”把句子拆成两个 <p></p>，再用 display: inline 拉平——这会破坏语义、影响可访问性（屏幕阅读器可能读断），还容易因 margin/padding 导致对不齐。
典型错误现象：<p style="display: inline; color: blue">左边</p> <p style="display: inline; color: red">右边</p>，看着像一行，实则结构混乱、seo 不友好、打印时可能分页错乱。
- 行内文本分色，只用
<span></span>、<em></em>、<strong></strong>这类天然行内容器 - 如果涉及强调语义（比如关键数据），优先用
<strong></strong>+ CSS 控制颜色，比纯<span></span>更合理 - 所有块级元素强行变行内，都是在绕开 HTML 设计本意，后续调试成本会明显上升
注意继承与选择器权重干扰颜色
实际开发中常遇到：明明写了 color: green，文字却还是灰色——大概率是父容器或全局 CSS 的颜色规则覆盖了它。
例如，某个 ui 框架给所有 p 设了 color: #666，而你只给 <span></span> 写了 color: red，但没加 !important，这时就可能失效（尤其框架样式带高权重）。
- 用浏览器开发者工具检查元素，看最终生效的
color来自哪条规则 - 优先提高选择器 specificity，比如用
p .highlight代替单纯.highlight，比滥用!important更可持续 - 若用 CSS-in-js 或组件库，注意其样式隔离机制是否影响了内联
span的颜色继承
颜色能分，但分得干净的前提是结构不乱。最容易被忽略的是语义和样式的耦合——不是“能不能显示两种颜色”，而是“这段文字为什么需要两种颜色”，这个意图是否被 HTML 结构准确表达了。