css -::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 Fiddle demo .

不过，重新审视这个问题，值得注意的是，现在您可以使用 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 Fiddle demo .