CSS选择器实现渐变文本：多字母独立渐变问题求解（不修改结构）

不需要修改现有HTML结构，仅调整CSS即可让三个目标字母实现连续的渐变视觉效果：

.gradient-text {
  font-size: 24px; 
  font-weight: bold; 
  display: inline-block; 
  /* 父容器设置完整渐变，背景宽度拉伸为3倍（对应3个目标字母） */
  background: linear-gradient(to right, blue, red);
  background-size: 300% 100%;
  background-repeat: no-repeat;
}

.gradient-text div {
  display: inline; 
  color: black; 
}

/* 目标字母的span：继承父背景，裁剪为文字样式 */
.gradient-text div:nth-child(n+4):nth-child(-n+6) span {
  -webkit-background-clip: text;
  color: transparent;
  background: inherit;
}

/* 为每个目标字母设置不同背景位置，拼接成连续渐变 */
.gradient-text div:nth-child(4) span {
  background-position: 0 0;
}
.gradient-text div:nth-child(5) span {
  background-position: 50% 0;
}
.gradient-text div:nth-child(6) span {
  background-position: 100% 0;
}

原理说明 #

• 将完整的蓝红渐变设置在父容器.gradient-text上，通过background-size: 300% 100%把渐变宽度拉伸为容器的3倍，让三个目标字母能分别截取渐变的一段。
• 让目标字母的span继承父容器的背景，配合-webkit-background-clip: text和透明文字色，实现文字渐变效果。
• 给三个目标span分别设置不同的background-position：第一个显示渐变最左侧、第二个显示中间段、第三个显示最右侧，最终形成从左到右连续的蓝到红渐变过渡。

该方案完全保留原有HTML结构，不会影响已有的动画逻辑。

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