[toc]
## ::first-letter偽元素生效的前提
1. display為:block、inline-block、list-item、table-cell或則table-caption,其它所有值都沒用(包括display:table和flex)
2. 不是所有字符都能作為偽元素生效,只有數字、英文字母、中文、$、一些運算符,以及**空格** 才會有效
3. 該偽元素可以跨標簽獲取(標簽嵌套很多層也是可以獲取的只要滿足上面兩點)
### 贈品字符
`::first-letter`只會選中第一個有效的字符,注意,是第一個**有效的**字符,但如果第一個有效字符并不是作為第一個字符存在,那么這個第一個有效字符前面的所有其他字符也會被選中,
我們稱這些被連帶選中的字符為`贈品字符`

## 其他失效情況
1. 有效字符前面不能有圖片或則inline-block/inline-table之類的元素存在

2. 第一個有效字符為空標簽

3. 該偽元素不能被隱藏(visibility:hidden、display:none)
## ::first-letter偽元素支持的CSS屬性
1. 所有字體有關的屬性
2. 所有背景有關的屬性
3. 所有margin有關的屬性
4. 所有padding有關的屬性
5. 所有border有關的屬性
6. color屬性
7. text-decoration、text-transform、letter-spacing、word-spacing(合適情景下)、line-height、float和vertical-align(只有當float為none的時候)等屬性
## ::first-letter的顏色等權重總是多一層
::first-letter偽元素是作為子元素存在的,或則說應當看出是子元素,
對于類似color這樣的繼承屬性,子元素的CSS設置一定比父元素的級別要高,**哪怕**父級使用了重量級的`!important`,因為子元素會**先**繼承,然后**再**應用自身設置。
## ¥案例
```
<p>¥999</p>
```
```
.price:first-letter{
margin-right:5px;
font-size:xx-large;
vertical-align:-2px;
}
```
- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端