Question

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

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

但是，正如我所注意到的，首字母仅用于字母，所以有没有办法将这种样式应用于第一个字符？在这种情况下是“（”。

Answer 1

来自spec：

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

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

有两种解决方法：

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

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

1 个答案: