CSS: перший лист не працює

Question 1

Я намагаюся застосувати стилі 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 навколо речей), хоча і не без особливих труднощів.

Question 2

::first-letterне працює з вбудованими елементами, такими як span. ::first-letterпрацює з елементами блоків, такими як абзац, підпис таблиці, комірка таблиці, елемент списку або елементи, для яких для 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-letterCSS псевдо-елемент вибирає першу букву першому рядку блоку, якщо він не передує будь-якому іншому змістом (наприклад, зображень або вбудованих таблиць) на своїй лінії.

...

Перша лінія має тільки сенс в коробці блоку-контейнера, тому ::first-letterпсевдо-елемент має тільки ефект на елементах з displayвеличиною block, inline-block, table-cell, list-itemабо table-caption. У всіх інших випадках ::first-letterне має ефекту.

Інший непарних випадок ( за виключення не працює на вбудованих елементах), якщо ви використовуєте буде застосовуватися до які раніше не фактичної першою літерою см codepen:before:first-letter

Приклади

Список літератури

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

Question 3

Ви можете отримати заплановану поведінку, встановивши властивість display span для inline-block:

.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}

<div class="heading">
  <span>An</span>
  <span>Interesting</span>
  <span>Heading</span>
</div>

Розгорніть фрагмент

Question 4

Це пояснюється тим, що :first-letterоперує лише елементами block / inline-block. SPANє вбудованим елементом.

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

Псевдоелемент: із першої літери в основному використовується для створення загальних типографських ефектів, таких як кришки. Цей псевдоелемент представляє перший символ першого відформатованого рядка тексту в елементі рівня блоку, вбудованому блоці, заголовку таблиці, комірці таблиці або елементі списку.