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

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，因为(被视为标点符号，而不是字母。

有两种解决方法：

1. 用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;
   }
   

2. 从您的文字中删除括号：

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