CSS: первая буква не работает

49

Я пытаюсь применить стили CSS к некоторым фрагментам HTML, которые были сгенерированы из документа Microsoft Word. HTML, созданный Word, является довольно жестоким и включает в себя множество встроенных стилей. Это происходит примерно так:

<html>
    <head></head>
    <body>
        <center>
            <p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span
               style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p>

            <p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span
                style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p>
    </body>
</html>

... и очень просто, я хотел бы создать первую букву заголовка. Он просто должен быть большим и другим шрифтом. Для этого я пытаюсь использовать селектор :first-letter, с чем-то вроде:

p b span:first-letter {
    font-size: 500px !important;
}

Но он, похоже, не работает. Вот скрипка, демонстрирующая это:

http://jsfiddle.net/KvGr2/

Любые идеи, что не так/как правильно получить первую букву заголовка? Я могу внести незначительные изменения в разметку (например, добавить обертку div вокруг вещей), хотя и не без труда.

Теги:

3 ответа

130
Лучший ответ

:first-letter не работает с встроенными элементами, такими как span. :first-letter работает с элементами block, такими как абзац, заголовок таблицы, ячейка таблицы, элемент списка или те, у которых свойство display установлено на inline-block.

Поэтому лучше применить :first-letter к p вместо span.

p:first-letter {font-size: 500px;}

или если вы хотите селектор :first-letter в span, тогда напишите его следующим образом:

p b span:first-letter {font-size: 500px !important;}
span {display:block}

MDN содержит обоснование для этого неочевидного поведения:

Псевдоэлемент ::first-letter CSS выбирает первую букву первой строки блока, если ей не предшествует какой-либо другой контент (например, изображения или встроенные таблицы) на его строке.

...

Первая строка имеет только значение в блоке-контейнере, поэтому псевдоэлемент ::first-letter оказывает влияние только на элементы со значением display block, inline-block, table-cell, list-item или table-caption. Во всех остальных случаях ::first-letter не действует.

Примеры

Ссылки

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter

Поделиться
  • 0
    Спасибо за это. Одна странная вещь, которую я заметил - знак% тоже изменяется? jsfiddle.net/iamkeir/KvGr2/76
  • 1
    +1 Спасибо за спасение меня больше обострения. Я должен думать, что довольно часто хочется использовать элемент span , поэтому я удивлен, что он не работает.
7

Вы можете получить предполагаемое поведение, установив свойство отображения диапазона в встроенный блок:

.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}
<div class="heading">
  <span>An</span>
  <span>Interesting</span>
  <span>Heading</span>
</div>
Поделиться
5

Это связано с тем, что :first-letter работает только с элементами block/inline-block. SPAN является встроенным элементом.

Взято из http://reference.sitepoint.com/css/pseudoelement-firstletter:

Псевдоэлемент первой буквы используется в основном для создания общих типографские эффекты, такие как капли. Этот псевдоэлемент представляет первый символ первой отформатированной строки текста в блочный уровень, встроенный блок, заголовок таблицы, ячейку таблицы, или элемент списка.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню