CSS:第一封信不起作用

Question

CSS:第一封信不起作用

我正在尝试将CSS样式应用于从Microsoft Word文档生成的某些HTML片段.Word生成的HTML相当残酷,并且包含许多内联样式.它是这样的:

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

Run Code Online (Sandbox Code Playgroud)

......而且非常简单,我想设置标题部分的第一个字母.它只需要更大和不同的字体.要做到这一点,我试图使用:first-letter选择器,有类似的东西:

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

Run Code Online (Sandbox Code Playgroud)

但它似乎没有奏效.这是一个演示这个的小提琴:

http://jsfiddle.net/KvGr2/

任何想法有什么问题/如何正确地设置标题部分的第一个字母？我可以对标记进行微小的更改(比如在事物周围添加包装器div),尽管并非没有困难.

Answer 1

san*_*eep 171

::first-letter不适用于内联元素,如a span.::first-letter适用于块元素,例如段落,表格标题,表格单元格,列表项目或display属性设置为的元素inline-block.

因此,最好应用于::first-lettera p而不是a span.

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

Run Code Online (Sandbox Code Playgroud)

或者如果你想在a中::first-letter选择一个,span那么就像这样写:

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

Run Code Online (Sandbox Code Playgroud)

MDN 提供了这种非显而易见行为的基本原理:

的::first-letterCSS伪元素选择一个块的第一行的第一个字母,如果它不是通过在其线的任何其他内容(例如图像或内联表)之前.

...

第一条线仅意在块容器箱,因此,::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

+1 感谢您为我省去更多麻烦。我不得不认为想要使用 `span` 元素是很常见的，所以我很惊讶它不起作用。 (3认同)

Answer 2

Dov*_*etz 12

您可以通过将span的display属性设置为inline-block来获得预期的行为:

.heading span {
  display: inline-block;
}

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

Ofe*_*lig 7

这是因为:first-letter仅对块/内联块元素进行操作.SPAN是一个内联元素.

摘自http://reference.sitepoint.com/css/pseudoelement-firstletter:

:first-letter伪元素主要用于创建常见的排版效果,如首字下沉.此伪元素表示块级元素,内联块,表格标题,表格单元格或列表项目中第一个格式化文本行的第一个字符.

归档时间：	13 年，11 月前
查看次数：	48547 次
最近记录：	6 年，1 月前