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

【问题标题】：CSS pseudo-element to apply the first character of an elementCSS 伪元素应用元素的第一个字符
【发布时间】：2011-08-04 16:36:57
【问题描述】：

我的 h1 标签中有以下内容：“(Hello World)”，所以我将以下内容添加到我的 css 以更改此元素的第一个字符：

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

但是，正如我所注意到的，第一个字母仅用于字母，那么是否有任何解决方法可以将此样式应用于第一个字符？在这种情况下是“（”。

【问题讨论】：

实际上结果不是我所期望的，因为前两个字符变大了！ jsfiddle.net/Bk5M8 就像 BoltClock 所说，如果第一个字符是标点符号，那么它旁边的字母也将应用该样式。如果第一个字符是字母，那么这是唯一会受到影响的字符。

标签： css css-selectors pseudo-element

【解决方案1】：

来自spec：

标点符号（即Unicode[UNICODE]中定义的字符在“open”（Ps）、“close”（Pe）、“initial”（Pi）。“final”（Pf）和“other”（Po）标点符号类），应包括在第一个字母之前或之后

所以你的括号和字母H被:first-letter选中，因为(被认为是标点符号，而不是字母。

有两种解决方法：

将左括号括在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;
}

从文本中删除括号：

<h1>Hello World</h1>

并改用:before 和/或:after（IE7 和更早版本不支持）：

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

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

【讨论】：

在不接触 HTML 的情况下解决此问题的任何方法。在我的情况下哪个不能修改？
@Esser：Boldewyn 说了什么。
@BoltClock 我的问题是是否有针对 CSS 方法的修复，因为我会尽量避免在使用 CSS 时使用 javascript。不过谢谢。