html - 更改最后一个字母颜色

Question

示例代码:

<p class="test">string</p>

我想更改最后一个字母的颜色，在本例中为“g”，但我需要 css 解决方案，我不需要 javascript 解决方案。

我一个字母一个字母地显示字符串，我不能使用静态解决方案。

Answer 1

每个人都说这是不可能的。我来这里是为了证明并非如此。

是的，它可以完成。

好吧，这是一个可怕的 hack，但它是可以做到的。

我们需要使用两个 CSS 特性:

• 首先，CSS 提供了改变文本流向的能力。这通常用于阿拉伯语或希伯来语等脚本，但它实际上适用于任何文本。如果我们将它用于英文文本，字母将以与标记中出现的顺序相反的顺序显示。因此，为了让文本在反向元素上显示为单词“String”，我们必须有显示为“gnirtS”的标记。

• 其次，CSS 具有::first-letter 伪元素选择器，它选择文本中的第一个字母。 (其他答案已经确定这是可用的，但没有等效的 ::last-letter 选择器)

现在，如果我们将 ::first-letter 与反向文本组合，我们可以选择“gnirtS”的第一个字母，但看起来我们选择的是最后一个字母的“字符串”。

所以我们的 CSS 看起来像这样:

div {
    unicode-bidi:bidi-override;
    direction:rtl;
}

div::first-letter {
    color: blue;
}

和 HTML:

<div>gnirtS</div>

是的，这确实有效——你可以在这里看到有效的 fiddle :http://jsfiddle.net/gFcA9/

但正如我所说，它有点老套。谁愿意花时间把所有东西倒过来写？这不是一个真正实用的解决方案，但它确实回答了这个问题。