css - ::首字母伪元素在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 小提琴演示。

Answer 2

一切正常：::first-letter选择第一个字母，但“$”不是字母而是特殊字符。

Answer 3

其他人已经解释了为什么它不起作用，所以，你可以考虑一个小修复：给你的钱 div 一个类，例如

<li><strong>David Wilcox</strong> <div class="money">5,849,487<sup>84</sup></div></li>

取出文字 $，并将其放入:before内容中，例如：

.money:before {
    content: '$';
    ...
}

现在你可以随心所欲地设计它。