::第一个字母伪元素不工作在firefox [英] ::first-letter pseudo-element not working in firefox

问题描述

我不能为我的生活计算这一个。我只想将美元符号设为不同的颜色，我想避免在美元符号周围使用另一个元素。

I cannot for the life of me figure this one out. I just want to style the dollar sign to be a different color and I would like to avoid using another element around the dollar sign.

<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/

推荐答案

这似乎是由于 $ 作为字母字符由Firefox发现，用字母字符替换 $ （ A ， B ， C ...）使演示工作：

It seems to be due to the $ character not being interpreted as a letter character by Firefox, based on the discovery that replacing the $ with a letter character (A, B, C...) causes the demo to work:

<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 generated-content来提供和风格化第一个字符，使用 :: before ：

Revisiting this question, though, it's worth noting that now you could use CSS generated-content to both supply, and style, a first-character, using ::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 。

这篇关于::第一个字母伪元素不工作在firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！