3

私は一生これを理解することはできません。ドル記号を別の色にスタイルしたいだけで、ドル記号の周りに別の要素を使用したくないのです。

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

4

3 に答える 3

7

を文字 ( 、、...)$に置き換えるとデモが動作するという発見に基づいて、文字が Firefox によって文字として解釈されないことが原因のようです。$ABC

<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 フィドルのデモ。

于 2012-10-05T20:53:37.760 に答える
4

最初の文字を選択します::first-letterが、「$」は文字ではなく特殊文字です。

于 2012-10-05T20:54:31.393 に答える
1

他の人は、それが機能しない理由をすでに説明しているので、考慮すべき小さな修正: money div にクラスを指定します。

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

リテラル $ を取り出して、:beforeコンテンツに入れます。例:

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

これで好きなようにスタイリングできます。

于 2012-10-05T21:01:52.710 に答える