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

Question

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

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

但是,正如我所注意到的,第一个字母仅用于字母,所以是否有任何变通方法可以将此样式应用于第一个字符？在这种情况下是"(".

Answer 1

从规格:

标点符号(即Unicode [UNICODE]中定义的字符在"打开"(Ps),"关闭"(Pe),"初始"(Pi)."final"(Pf)和"其他"(Po)标点符号类中)应包括在第一个字母之前或之后的字母

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

有两种解决方法:

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