CSS伪元素：如何应用一个元素的第一个字符

Question

CSS伪元素：如何应用一个元素的第一个字符

5

我在h1标签中有以下内容："(Hello World)"，所以我添加了以下css代码来更改此元素的第一个字符：

h1:first-letter { font-size:63px; color:#510007; font-family:Helvetica; }

但是，正如我注意到的那样，first-letter只适用于字母，那么有没有任何解决方法可以将这种样式应用于第一个字符？在这种情况下是"（"。

- rodrigoalvesvieira

实际上，结果并不是我预期的，因为前两个字符变大了！http://jsfiddle.net/Bk5M8/ 正如BoltClock所说，如果第一个字符是标点符号，则其旁边的字母也会应用该样式。如果第一个字符是字母，则只有这个字母会受到影响。 - David

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

从规范中得知：

标点符号（即在Unicode [UNICODE]中定义为“开放”（Ps）、“关闭”（Pe）、“初始”（Pi）、“最终”（Pf）和“其他”（Po）标点符号类别的字符），在第一个字母之前或之后应包括在内。

因此，您的括号和字母H都被:first-letter选中，因为(被视为标点符号而不是字母。

有两个解决方法：

Wrap your opening bracket in span tags:

<!-- To style both (), wrap both in <span> tags -->
<h1><span>(</span>Hello World)</h1>

and target h1 span:

h1 span {
    font-size: 63px;
    color: #510007;
    font-family: Helvetica;
}

Drop the brackets from your text:

<h1>Hello World</h1>

and use :before and/or :after instead (not supported in IE7 and older):

/* To style both (), use h1:before, h1:after */
h1:before {
    font-size: 63px;
    color: #510007;
    font-family: Helvetica;
}

h1:before { content: '('; }
h1:after { content: ')'; }