CSS：首字母不起作用

小编典典

CSS：首字母不起作用

html

我正在尝试将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>

…非常简单，我想为标题部分的第一个字母设置样式。它只需要更大并且使用不同的字体即可。为此，我尝试使用:first-letter选择器，例如：

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

任何想法有什么问题/如何正确设置标题部分的首字母？我可以对标记进行一些细微的更改（例如在事物周围添加包装器div），尽管并非没有困难。

阅读 329

2020-05-10

共1个答案

小编典典

::first-letter不适用于内联元素（例如）span。::first-letter适用于块
元素，如段落，表格标题，表格单元格，列表项，或那些与他们的display属性设置为inline-block。

因此，最好使用::first-lettera p代替a 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均无效。

2020-05-10