: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偽元素

總結

以上是生活随笔為你收集整理的深入::first-letter的研究的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。