CSS: la primera letra no funciona

Question 1

Estoy tratando de aplicar estilos CSS a algunos fragmentos de HTML que se generaron a partir de un documento de Microsoft Word. El HTML generado por Word es bastante atroz e incluye muchos estilos en línea. Es algo parecido a esto:

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

... y muy simplemente, me gustaría darle estilo a la primera letra de la sección del título. Solo necesita ser más grande y tener una fuente diferente. Para hacer esto, estoy tratando de usar el :first-letterselector, con algo como:

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

Pero no parece estar funcionando. Aquí hay un violín que demuestra esto:

http://jsfiddle.net/KvGr2/

¿Alguna idea de qué está mal / cómo hacer que la primera letra de la sección del título tenga el estilo correcto? Puedo hacer cambios menores en el marcado (como agregar un div contenedor alrededor de las cosas), aunque no sin cierta dificultad.

Question 2

::first-letterno funciona en elementos en línea como a span. ::first-letterfunciona en elementos de bloque como un párrafo, título de tabla, celda de tabla, elemento de lista o aquellos con su displaypropiedad establecida en inline-block.

Por lo tanto, es mejor aplicar ::first-lettera a en plugar de a span.

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

o si quieres un ::first-letterselector en un span, escríbelo así:

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

MDN proporciona la justificación de este comportamiento no obvio:

El ::first-letterpseudoelemento CSS selecciona la primera letra de la primera línea de un bloque, si no está precedida por ningún otro contenido (como imágenes o tablas en línea) en su línea.

...

Una primera línea sólo tiene sentido en una caja de bloque-contenedor, por lo tanto, el ::first-letterpseudo-elemento tiene solamente un efecto en elementos con un displayvalor de block, inline-block, table-cell, list-itemo table-caption. En todos los demás casos, ::first-letterno tiene ningún efecto.

Otro caso extraño (aparte de no trabajar en elementos en línea) es que si usa :beforeel :first-letterse aplicará al anterior, no a la primera letra real, ver codepen

Ejemplos

Referencias

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

Question 3

Puede obtener el comportamiento deseado estableciendo la propiedad de visualización del intervalo en 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>

Expandir fragmento

Question 4

Esto se debe a que :first-lettersolo funciona en elementos de bloque / bloque en línea. SPANes un elemento en línea.

Tomado de http://reference.sitepoint.com/css/pseudoelement-firstletter :

El pseudo-elemento: first-letter se utiliza principalmente para crear efectos tipográficos comunes como letras mayúsculas. Este pseudoelemento representa el primer carácter de la primera línea de texto formateada en un elemento a nivel de bloque, un bloque en línea, un título de tabla, una celda de tabla o un elemento de lista.