应使用标签包裹需变色文字并配合color属性或CSS类实现样式控制，禁用已废弃的标签，注意继承、优先级及渲染干扰问题。
用
HTML 本身不支持“给一行里某几个字单独设颜色”，必须靠内联元素把目标文字从文本流中“拎出来”。 就是干这个的——它没语义、不换行、不影响布局，纯用来加样式。
常见错误是直接在 里写颜色属性（比如 ），这根本无效，HTML 标签没有 color 属性。
- 只对想变色的部分套
红色字 - 不要用
标签——已废弃多年，现代浏览器虽可能渲染，但不可靠且不合法 - 如果要复用样式，优先用 class：
高亮字，再在 CSS 里定义.highlight { color: #007bff; }
CSS 的 color 属性只作用于文本内容
color 是文本颜色控制的唯一标准方式，它影响的是元素自身的文字，以及其内部未显式覆盖颜色的子文本。它不会改变背景、边框或图片。
容易踩的坑：给 设了 color，但父级 用了深色主题或 CSS 变量，结果被继承覆盖；或者误以为 color 能让图标、SVG 或伪元素变色（不能，那些得另配）。
立即学习“前端免费学习笔记（深入）”；
-
color支持关键字（red）、十六进制（#ff6b6b）、RGB（rgb(255, 107, 107)）、HSL 等，推荐用十六进制或 HSL，可控性强 - 避免用
!important强行覆盖——大概率说明选择器优先级或继承逻辑没理清 - 暗色模式下，硬编码颜色可能看不清；如需适配，可用
color: var(--text-highlight, #007bff)配合@media (prefers-color-scheme: dark)
别用
在部分老项目或编辑器预览里似乎有效，但这只是浏览器的向后兼容兜底行为，不是规范，也不保证跨浏览器一致。W3C 早在 HTML 4.01 就废弃了它，HTML5 完全不支持。
SlipHover 是一个基于 jQuery 的插件，它能够感知鼠标移动方向，并在相应的方向（或反方向）以动画的方式显示出一个遮罩层，用来显示标题或描述，应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配，相信能让你的幻灯片或相册更加的上档次。
真实问题场景：从 Word 粘贴或 CMS 导出的 HTML 带了一堆 ，显示正常但校验报错、SEO 工具警告、未来某天某个浏览器更新后突然失效。
- 批量替换时，正则可匹配
]*color=["']([^"']*)["'][^>]*>([\s\S]*?)，转成$2 - 如果只是临时调试，用开发者工具直接改
style属性比改标签更安全 - 注意
可能嵌套或和/混用，手动清理时别漏掉闭合标签
遇到 inline 元素颜色不生效？先查三个地方
写了 却没变色，90% 是以下三类干扰之一：
- CSS 优先级更高：检查是否被父级
!important或更具体的选择器（比如p spanvsspan）覆盖 - 继承链中断：父元素设了
color: transparent或visibility: hidden，子元素无法“继承”出可见颜色 - 文本被其他样式遮挡：比如
background-color和文字颜色相近、用了text-shadow盖住原字、或字体本身渲染异常（如某些 icon font 把文字当图标路径处理）
最稳的排查顺序：打开浏览器开发者工具 → 选中那个 → 看右边 Styles 面板里 color 是否被划掉；没划掉就看 Computed 面板里最终生效值是多少；再往上逐级点父元素看 color 继承来源。
真正麻烦的从来不是怎么标颜色，而是为什么标了却看不见——这时候往往不是 HTML 写错了，是样式层叠或渲染上下文出了问题。
