::first-letter 伪元素在 Firefox 中不起作用

Question

我一生都无法弄清楚这一点。我只想将美元符号的样式设置为不同的颜色，并且我想避免在美元符号周围使用其他元素。

<ul>
    <li><strong>John Dow</strong> <div>$5,849,487<sup>84</sup></div></li>
    <li><strong>David Jones</strong> <div>$5,498,364<sup>01</sup></div></li>
    <li><strong>Susie Smith</strong> <div>$5,098,276<sup>35</sup></div></li>
</ul>

这个CSS：

li::first-letter {
    color: blue;
}
li div::first-letter {
    color: red;
}??

蓝色有效，红色无效。

http://jsfiddle.net/ryanwheale/KUzUp/

Answer 1

这似乎是由于$Firefox 没有将字符解释为字母字符，基于发现将 替换$为字母字符 ( A, B, C...) 导致演示工作：

<ul>
    <li><strong>David Wilcox</strong> <div>A$5,849,487<sup>84</sup></div></li>
    <li><strong>David Cowee</strong> <div>B$5,498,364<sup>01</sup></div></li>
    <li><strong>D.J. Johnson</strong> <div>C$5,098,276<sup>35</sup></div></li>
</ul>?

JS小提琴演示。

不过，重新审视这个问题，值得注意的是，现在您可以使用 CSS 生成内容来提供和样式，第一个字符，使用::before：

li div::before {
    content: '$';
    color: red;
}

使用 HTML：

<ul>
    <li><strong>David Wilcox</strong> 
        <div>5,849,487<sup>84</sup>
        </div>
    </li>
    <!-- siblings removed for brevity -->
</ul>

JS小提琴演示。