CSS中段落中的重复颜色模式

Question

我有一个段落标记，我希望其中的文本每隔一个字母为橙色，其余字母为深橙色。懒惰代码如下所示：

Html

<p>
    <span class='orange'>L</span>
    <span class='yellow'>o</span>
    <span class='orange'>r</span>
    <span class='yellow'>e</span>
    <span class='orange'>m</span>
</p>

Css

.yellow {
    color: darkorange;
}
.orange {
    color: orange;
}

Fiddle（第二种颜色变为蓝色以引起注意）

如何使此代码看起来不那么懒惰？我知道当你第一次读到这个问题时，你可能会想"不可能。只有用魔法才能完成。"，但我认为这应该很简单。我会处理任何事情，甚至是让图像在文本中重复的方法。

Answer 1

在CSS中，不能针对字符数据内容的单个字母，只能针对元素和伪元素的一小部分。因此，您确实需要标记。然而，您应该永远不要在类中使用表示名称，这就是CSS的工作。因此，使用匿名的无语义内联元素<span>而不需要进一步的细节，然后只使用高级CSS选择器：

<p>
    <span>L</span>
    <span>o</span>
    <span>r</span>
    <span>e</span>
    <span>m</span>
</p>

和CSS：

p {
  color:orange;
}
p span:nth-child(odd) {
  color:yellow;
}

在这里看到的行动。