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

问题描述：

我在h1标签中有以下内容：（Hello World），所以我添加以下到我的css更改此元素的第一个字符：

I have the following content in my h1 tag: "(Hello World)" so I add the following to my css to change the first character of this element:

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

但是，我注意到，第一个字母只是字母，所以有任何解决方法应用这种风格的第一个字符？在这种情况下是（。

But, as I noticed, first-letter is only for letters, so is there any workarounds to apply this style to the first char? Which in this case is "(".

答

从 spec ：

标点符号，Unicode中定义的字符 [UNICODE] 在开放应该包括在第一个字母之前或之后的第一个字母（Ps），关闭（Pe），初始（Pi），final（Pf）和其他（Po）标点符号类型

Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included

因此，您的括号和字母H由：first-letter ，因为（被视为标点符号，而不是字母。

So your bracket and the letter H are selected by :first-letter, because ( is considered a punctuation symbol, not a letter.

有两种解决方法： p>

There are two workarounds:

将开头括号括在 span 标签中：

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

和目标 h1 span ：

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

从文字中删除括号：

Drop the brackets from your text:

<h1>Hello World</h1>

并使用：before code>：after 改为（不支持在IE7及更早版本）：

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: ')'; }

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

相关推荐