:: псевдоэлемент first-letter не работает в firefox

Я не могу на всю жизнь понять это. Я просто хочу, чтобы знак доллара был другого цвета, и я хотел бы избежать использования другого элемента вокруг знака доллара.

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


css firefox pseudo-element
person Ryan Wheale    schedule 05.10.2012    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Похоже, это связано с тем, что символ $ не интерпретируется 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.

Тем не менее, возвращаясь к этому вопросу, стоит отметить, что теперь вы можете использовать сгенерированный 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 Fiddle.

person David says reinstate Monica    schedule 05.10.2012
comment
Спасибо за демонстрацию, но @StephanNeubert опередил вас. - person Ryan Wheale; 06.10.2012
comment
Наведите указатель мыши на текст '...мин. назад', и во всплывающей подсказке вы увидите отметку времени, которая показывает точное время публикации ответа. Мы были достаточно близко к тому же времени, что и не имеет значения, но я был, я думаю, немного быстрее. =) Но, повторяю: «достаточно близко, чтобы не было никакой разницы». - person David says reinstate Monica; 06.10.2012
comment
Извините, я должен был быть более ясным. Пост Стефана появился первым (не знаю почему), но он определенно не был первым. Поскольку я присудил баллы первому ответу, я покорно переназначил баллы вам. Благодарю за разъяснение. - person Ryan Wheale; 06.10.2012
comment
Честно говоря, не важно, кто был первым, важно то, «кто помог вам больше всего». Хотя, очевидно, я ценю представителя, конечно! - person David says reinstate Monica; 06.10.2012
comment
Для ответов, которые одинаково полезны, все сводится к тому, кто, на мой взгляд, первый. - person Ryan Wheale; 11.10.2012

arrow_upward
3
arrow_downward

Все работает как надо: ::first-letter выбирает первую букву, но "$" не буква, а спецсимвол.

person Stefan Neubert    schedule 05.10.2012
comment
Вау... Никогда бы не подумал, что это так буквально. - person Ryan Wheale; 06.10.2012
comment
Что бы это ни стоило, спецификация на это говорит: Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included. Знак доллара находится в классе Sc в Unicode, что, как сказал Стефан, является специальными символами. Если бы у вас была кавычка, поведение было бы другим... - person Boris Zbarsky; 06.10.2012

arrow_upward
1
arrow_downward

Другие уже объяснили, почему это не работает, поэтому небольшое исправление для вас: дайте вашему денежному div класс, например

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

выньте литерал $ и поместите его в :before содержимое, например:

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

Теперь вы можете стилизовать его так, как вам нравится.

person tuff    schedule 05.10.2012
comment
Если вы можете изменить содержимое, почему бы не обернуть «$» в span вместо того, чтобы его внешний вид зависел от CSS? - person Jukka K. Korpela; 06.10.2012
comment
Вы имеете в виду, что его содержимое зависит от CSS (поскольку его внешний вид будет в любом случае)? Нет сверхсильной причины, за исключением того, что :before потребует меньше разметки, и если содержимое .money заполняется программно, это позволит передавать более чистые данные. - person tuff; 06.10.2012
comment
Я согласен с Юккой: я бы по возможности избегал добавления контента через css - в этом смысл разделения контента и представления. - person Stefan Neubert; 06.10.2012
comment
Спасибо за предложение. Этот класс даже не нужен, так как я уже ориентировался на DIV в своем исходном примере. К сожалению, клиент платит за поддержку IE7 (в наши дни это дополнение). Кроме того, я буду иметь дело с редакторами контента... и я не хочу объяснять, как волшебным образом появляется знак доллара. Если бы это был мой сайт, это была бы победа. - person Ryan Wheale; 06.10.2012