[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; } ```