::第一个字母的伪元素在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>

And this CSS:

这个CSS:

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

The blue works, the red does not.

蓝色的作品,红色的不行。

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

3 个解决方案

#1

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:

这似乎是由于$字符不被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.

JS小提琴演示。

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:

但是,重新审视这个问题,值得注意的是,现在你可以使用CSS生成内容来提供和设置第一个字符,使用:: before:

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

With the HTML:

使用HTML:

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

JS Fiddle demo.

JS小提琴演示。

#2

Everything works as it should do: ::first-letter selects the first letter, but "$" is not a letter but a special character.

一切都按预期工作:::首字母选择第一个字母,但“$”不是字母而是特殊字符。

#3

Others already explained why it doesn't work, so, a small fix for you to consider: give your money div a class, eg

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

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

take out the literal $, and put it in :before content, eg:

取出文字$,并将其放入:内容之前,例如:

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

Now you can style it however you like.

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