如何在不使用标签的情况下在单个范围中添加三种颜色的文本<font>

Question

如何在单个span中添加三种颜色的文本(details-red, Enter-blue, this -yellow)，而不使用<font>标签。这可能吗?

<span>Details Enter Here</span>

Answer 1

如果不使用3个不同的标签，你就无法做到这一点，因为你需要一个标识符或其他东西来添加颜色。纯文本是不够的说明符。下面是一个示例，展示了如何在3个单独的<span>或3个单独的<div>中使用它。

JSFiddle

Answer 2

需要使用3个不同的span，如下所示:

<span style="color:red">Details</span>
<span style="color:blue"> Enter</span>
<span style="color:yellow"> Here</span>

Answer 3

虽然没有CSS选择器，但如果没有span内的任何附加标记，您就无法做到这一点。由于font标记已弃用，您仍然可以使用其他内联标记。最常见的是span，所以在span中包装span没有问题，因为它允许(对HTML 4和5有效)在span中包装内联元素。

你在上面的评论中说:

先生，我们有一个共同的CSS，所以我们不能使用字体标签，包括更多的span将需要改变其他页面也

所以这是正确的，如果你把span标签分成三个标签。但是您应该能够在现有标记中包装一些额外的span，例如:

<span>
    <span>Details </span>
    <span>Enter </span>
    <span>Here!</span>
</span>

那么你可以为span使用子类，甚至使用一些CSS魔法，如:

span:first-child {
  color: red;
}
span:nth-child(2) {
  color: blue;
}
span:last-child {
  color: yellow;
}

这样，就不需要改变任何当前的CSS(所以其他页面不会受到影响)，但是您可能需要为新标签添加一些额外的选择器(如果您不想触摸CSS文件，您甚至可以像<span style="color: blue">一样内联地这样做)。

你可以试试这里的小提琴。希望这对你有帮助!