如何不使用span标签修改段落内部分文本颜色？CSS实现方法咨询

可以实现，目前有两种常用的纯CSS方案，不需要额外添加span标签，适配不同使用场景：

• 方案1：等宽字体+渐变裁剪方案
  适用场景：段落内容动态变化、可接受使用等宽字体的场景
  核心逻辑是利用等宽字体每个字符宽度固定为1ch的特性，给文本背景设置渐变，再用background-clip: text将渐变映射到文字上：

p {
  /* 强制用等宽字体，保证每个字符宽度一致 */
  font-family: monospace;
  /* 渐变前10ch为红色，超出部分为黑色 */
  background: linear-gradient(90deg, red 0, red 10ch, #000 10ch);
  -webkit-background-clip: text;
  background-clip: text;
  /* 文字设为透明透出背景渐变 */
  color: transparent;
}

• 方案2：伪元素覆盖方案
  适用场景：段落内容固定、不需要动态更新的场景
  核心逻辑是用::before伪元素生成前10个字符，覆盖在原段落对应位置，直接设置伪元素文字颜色为红色：

p {
  position: relative;
  color: #000;
}
p::before {
  /* content填写段落前10个字符 */
  content: "这里填段落前10个字符";
  position: absolute;
  left: 0;
  top: 0;
  color: red;
  /* 和段落背景同色，覆盖原位置的黑色文字 */
  background: #fff;
}

注意：目前主流浏览器尚未支持CSS草案中的::nth-char()精准字符选择伪类，所以上述纯CSS方案都有一定局限性。如果生产环境需要兼容非等宽字体、动态内容，最稳定的方案还是用span标签包裹目标字符修改样式。

内容的提问来源于stack exchange，提问作者Harry Muscle