深入::first-letter的研究

:first-letter 伪元素用来向文本的第一个字母添加特殊样式

1.::first-letter伪元素生效的前提

1.首先，元素的display计算值必须是 block, inline-block, table-cell, list-item或者table-caption，其他所有display计算值都没有用，包括display:table以及display:flex等

2.不是所有的字符都能单独被::first-letter伪元素修饰的

比如给<p>????????</p>添加CSS样式”p:first-letter { color: #cd0000; }”的结果，我们发现第一个问号并没有变成红色。。这是哪里出了问题？？？这是因为常见的标点符号，各类括号和引号在::first-letter伪元素眼中全部都是“辅助类”字符，有点京东买东西送的赠品的感觉，但是赠品本身却不能购买，这里的问号（？）就属于赠品。有些不理解，我们看了例子就知道了，假如我们在上面HTML一堆问号后面写上一些内容字符，比方说中文“辅助”二字，结果效果就是

“？？？？？？？辅”全部都红色了，小样还挺有个性的，要么不红，要红就红一大波。原因是，“辅助”二字才是::first-letter伪元素真正要收入囊中作为“伪元素”的字符，但是现在前面出现了一堆不感冒的问号（？），怎么办呢？那就当做是赠品一并收了，于是，一大波字符全都红色了。如果全是问号（？），由于没有主商品，自然也就无法获得赠品，所以::first-letter没有选择任何字符，问号全部都是黑色。

3.字符前面不能有图片或者inline-table之类的元素存在

比如<p><i style="display:inline-block"></i>红色</p>的效果文字还是黑色的，因为就因为多了一个display值是inline-block尺寸为0的元素，导致::first-letter伪元素直接失效了。
那么我们要是用::before来生成伪元素能被”::first-letter”所修饰吗？？一般来讲，::before伪元素和普通元素之间没有多少瓜葛，和:first-child, :empty之类的选择器之间也不会受影响。用专业术语概括就是：::before伪元素也参与::first-letter伪元素

2::first-letter伪元素可以生效的CSS属性

如果字符被选作了::first-letter伪元素，并不是像::before伪元素那样，几乎所有CSS都有效，仅仅是一部分，如下：

• 所有字体相关属性：font, font-style, font-variant, font-weight, font-size, line-height以及font-family
• 所有背景相关属性：background-color, background-image, background-position, background-repeat, background-size, 以及background-attachment
• 所有margin相关属性：margin, margin-top, margin-right, margin-bottom, margin-left
• 所有padding相关属性：padding, padding-top, padding-right, padding-bottom, padding-left
• 所有border相关属性：缩写的border, border-style, border-color, border-width及普通书写的属性
• color属性
• text-decoration, text-transform, letter-spacing, word-spacing(合适情境下), line-height, float, vertical-align（只有当float为none的时候）这些CSS属性们
  所以大家如果妄图使用visibility:hidden或者display:none隐藏::first-letter伪元素，那还是省省吧，那完全是没有用的

3.::first-letter一些实际应用举例

这里再展示一个实际应用，是水哥之前跟我提及的。就是电商产品经常会有价格，价格前面一般都是有个羊角符号¥，表示价钱。往往这个羊角符号字体会比较特殊，字号也比较大，同时和文字的数值有几像素的距离。要实现这里的效果，我们通常的做法是在羊角符号¥外面包个span标签，命名个类名，然后通过CSS控制，实际上，有更简单巧妙的方法，就是使用本文介绍的::first-letter伪元素