Javascript 仅使用CSS的字符串中的不同颜色

是否有一种只使用CSS（不使用span）就可以使用不同颜色的单词的方法。 例如：

---

Red-Blue-Green

单独使用CSS是不可能的。

如果需要动态解决方案，则必须编写JavaScript来包装每个字母，但如果是静态标题，则可以在

span

中手动包装每个字母并设置样式

Javascript+Regex：

$('h1').html(function (i, html) {
    return html.replace(/(\d)/g, '<span>$1</span>');
});

$（'h1'）.html（函数（i，html）{
返回html.replace（/（\d）/g，$1'）；
});

使用背景颜色，但它适用于单空格字体，否则查找不同的值会很繁琐

h1{
字体系列：monospace；
颜色：透明；
背景：
重复线性渐变（向右，
红色0 3ch，
蓝色3ch 8ch，
绿色8ch 14ch）；
-webkit背景剪辑：文本；
背景剪辑：文本；
}

---

红蓝绿

不，这目前不可能

您可以尝试使用垂直CSS渐变，有点像这样：

    h1 {
       background: linear-gradient(to right, #ff3030 0%,#2e4bf2 3%,#27e524 6%); 
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
    }

如果您可以计算文本的宽度并在此处设置渐变停止点，而不是使用百分比：

     h1 {
       background: linear-gradient(to right, #ff3030 10px,#2e4bf2 10px,#27e524 10px); 
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
    }

---

据我所知，CSS对此有一个选择器（：第一个字母）。这样，您只能为第一个字母定义样式

您可以使用该库，而不是处理CSS

---

您可以使用渐变、混合模式或背景剪辑以及单空间字体：灵感来自&

混合模式需要2个元素来混合背景颜色和文本颜色

p{
字体系列：monospace；
字号：1.5em；
背景：线性渐变（向左，灰色0.5em，紫色1em，金色1.5em，蓝色2em，粉色2.5em，番茄3em，石灰3.5em，棕色4em）0 0；
背景大小：4.25em 100%；
}
跨度{
显示：块；
背景：白色；
混合模式：屏幕；
文本阴影：0 0 2px白色；
}
p~p{
颜色：透明；
背景剪辑：文本；
}
/*免责声明*/
正文{背景：#ddd；}
div{混合模式：屏幕；}

您的浏览器还不可用，请耐心等待。
span+mix混合模式
彩色文本渐变彩色文本渐变


背景剪辑文本渐变彩色文本渐变

为什么投票失败？问题只说明使用CSS，这是不可能的，因此提供了问题的答案，以及如果他们希望实现它，如何做。我否决了答案，因为OP明确说明

仅使用CSS

和

，而不使用HTML中的span

。你的回答忽略了这两个要求。正确的方法是对问题进行评论，说仅仅使用CSS是不可能的，他需要来自eg的额外“帮助”javascript@MihaiT好的，以后我会在评论中提供回退。谢谢：）我看不出这里有什么不对，据说这不可能单独使用CSS——这回答了基本问题。“建议另一种选择，即使这不完全是要求的，在回答时也不可能是真正的“犯罪”？”米索鲁德同意，但在硬币的另一面，我可以理解米切特的陈述。除了答案，你不想污染或破坏其他选择。你能使用多个h1标签吗

RedBlueGreen

然后，为每个元素添加id或类。这在动态内容上是如何实现的？@Riddell动态内容是什么意思？在这个问题上我没有看到任何与此相关的东西对不起，你有没有用动态内容做过这项工作？不涉及question@Riddell还是不明白动态内容是什么意思。我正在给每个字母着色，如果我们考虑一个单字字体，它会起作用。为什么要投票？不管你喜不喜欢，这是老年退休金问题的正确答案。