如何为指定类元素中的特定字母组合修改颜色？

方案1：纯CSS实现（适合固定开头的目标文本） #

如果你的目标文本ACPRO总是出现在开头且长度固定（5个字符），可以用CSS线性渐变结合文本裁剪的方式，完全不用写JavaScript：

.title {
  /* 线性渐变：前5个字符用橙色，剩下的用默认颜色 */
  background: linear-gradient(to right, orange 0 5ch, currentColor 5ch);
  /* 把背景裁剪到文本区域 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 让原文本透明，显示背景渐变 */
  color: transparent;
}

这个方法的好处是不用碰JS，直接把这段CSS加到你的样式表就行。5ch代表5个字符的宽度，刚好匹配ACPRO的长度。

方案2：简单JavaScript实现（适合任意位置的目标文本） #

如果ACPRO可能出现在文本的任意位置，或者同一个元素里有多个ACPRO，可以用一段极简的JS代码，你只需要把这段代码复制到HTML的<body>末尾就行：

<script>
// 找到所有class为title的元素
const titles = document.querySelectorAll('.title');

// 逐个处理每个元素
titles.forEach(title => {
  // 把文本里的所有ACPRO替换成橙色的span
  title.innerHTML = title.textContent.replace(/ACPRO/g, '<span style="color: orange;">ACPRO</span>');
});
</script>

这段代码的逻辑很直白：先找到所有需要处理的元素，然后把每个元素里的ACPRO替换成带橙色样式的<span>标签，其他文本保持原样。

内容的提问来源于stack exchange，提问作者Jason Hewitt