用包裹局部文字是最直接的办法：它语义中立、无默认样式、兼容性好且不破坏行内布局；禁用等错误标签；推荐css类替代行内style以提升可维护性；排查color失效需优先检查继承与选择器优先级。
用 <span></span> 包裹局部文字是最直接的办法
HTML 本身不支持给同一行文本里的不同字设不同颜色，必须靠内联元素切分。最常用、最稳妥的就是 <span></span>：它语义中立、无默认样式、浏览器兼容性好，且不会破坏行内流布局。
常见错误是试图用 <div> 或 <code><p></p> 去包单个词——它们是块级元素，强行塞进行内会换行或撑开高度，导致排版错乱。
- 把需要变色的部分用
<span style="color: red">红色字</span>包起来 - 确保父容器是行内上下文（比如
<p></p>、<div> 但没设 <code>display: block以外的值） - 避免嵌套过深：
<span><span><span>...</span></span></span>容易漏闭合标签，调试困难 - 定义类：
.highlight { color: #ff6b35; }和.primary { color: #2563eb; } - 在 HTML 中组合：
<span class="primary">订单号：</span><span class="highlight">#ORD-789</span> - 注意不要给
<span></span>设display: block或float，否则会脱离行内流 - 在开发者工具中检查目标
<span></span>元素，看color是否被!important或更具体的选择器覆盖 - 临时加
!important验证是否是优先级问题（上线前务必删掉） - 避免用 ID 选择器或大量嵌套（如
div#main p.info span.emphasis），容易失控 - 所有浏览器对
<font></font>的支持都在弱化，未来某天可能彻底不解析 - 它无法响应媒体查询，不能配合 dark mode 切换
- 替代方案只有
<span></span>+ CSS，没有例外
CSS 类比行内 style 更适合复用和维护
如果同一种配色组合（比如“主色蓝 + 强调色橙”）在多处出现，硬写 style="color: #ff6b35" 会重复且难统一修改。用 CSS 类更可控。
使用场景包括：按钮文字、状态标签、带强调的说明文案。性能上毫无差异，但可维护性提升明显。
立即学习“前端免费学习笔记（深入）”；
遇到 color 不生效？先查继承和选择器优先级
最常踩的坑不是写法错，而是被更高优先级的规则覆盖了。比如父元素设了 color: gray，子 <span></span> 又没显式声明颜色，就会继承灰色；或者全局 CSS 里写了 p span { color: inherit; }，直接废掉你的设置。
错误现象典型表现为：代码看着没问题，预览却是全灰/全黑/全白；开发者工具里看到 color 被划掉。
别用 <font></font> 标签，它已被废弃多年
<font color="red"></font> 看起来简单，但它在 HTML5 中已完全移除，现代浏览器虽大多仍能渲染，但会触发控制台警告，且无法通过 W3C 验证。更重要的是，它把样式逻辑硬编码进结构，违背关注点分离原则。
有些老项目或 CMS 输出里还能见到，但新代码里主动用就是给自己埋兼容性雷。
<span></span> 就不够了——得提前把语义分层做好，比如用 data-role="id" 或 class="text--emphasis" 这类有意义的标记，后面才好接管。
