html - 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;
}

Seen here in action .