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

Question

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

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

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

Answer 1

从规格：

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

所以你的括号和字母 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: ')'; }