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，{ {1}}，B ...）使演示有效：

JS Fiddle demo

重新审视这个问题，值得注意的是，现在你可以使用CSS生成内容来提供和设置第一个字符，使用<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>：

::before

使用HTML：

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

JS Fiddle demo

Answer 2

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

Answer 3

其他人已经解释了为什么它不起作用，所以，一个小小的修正案供你考虑：给你的钱一个班级，例如

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

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

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

现在你可以根据自己的喜好设计它。

::第一个字母的伪元素在firefox中不起作用

3 个答案: