8.7.1 深入:first-letter 伪元素及其实例
1．::first-letter 伪元素生效的前提。首先，元素的 display 计算值必须是 block、inline-block、list-item、tablecell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table和 display:flex 等。
2．::first-letter 伪元素可以生效的 CSS 属性。如果字符被选作了::first-letter 伪元素，并不是像::before 伪元素那样，几乎所有 CSS 都有效，只是一部分有效。
所有字体相关属性；所有背景相关属性；所有 margin 相关属性；所有 padding 相关属性；所有 border 相关属性；color 属性；text-decoration、text-transform、letter-spacing、word-spacing（合适情境下）、line-height、float 和 vertical-align（只有当 float 为 none的时候）等属性。
3．::first-letter 伪元素的一些有意思的特点。
（1）支持部分 display 属性值标签嵌套。
（2）颜色等权重总是多了一层。
4．::first-letter 实际应用举例。在¥符号外面包一个 span 标签，命名一个类名，然后通过 CSS 控制。实际上，还有更简单巧妙的方法，
就是使用本文介绍的::first-letter 伪元素。
CSS 示例代码如下：
.price:first-letter {
margin-right: 5px;
font-size: xx-large;
vertical-align: -2px;}
8.7.2 故事相对较少的:first-line 伪元素。
:first-line 和:first-letter 伪元素一样，IE9 及以上版本浏览器支持双冒号::first-line{}写法，IE8 浏览器只认识单冒号写法。
:first-line 和:first-letter 伪元素一样，只能作用在块级元素上，也就是display 为 block、inline-block、list-item、table-cell 或者 tablecaption 的元素设置:first-line 才有效，table、flex 之类都是无效的。
:first-line 和:first-letter 伪元素一样，仅支持部分 CSS 属性；
:first-line 和:first-letter 伪元素一样，color 等继承属性的权重总是多了一层，毕竟称为“伪元素”，就好像里面还有个子元素。
:first-line 和:first-letter 伪元素一样，也支持标签嵌套；
9.1.1 少得可怜的颜色关键字。这里的“颜色关键字”指的是诸如 red、blue 这些关键字。
9.1.2 不支持的 transparent 关键字。transparent 关键字是一个很有意思的关键字，background-color:transparent包括 IE6 浏览器都支持，border-color:transparent 从 IE7 浏览器开始支持，但是 color: transparent 却从 IE9 浏览器才开始支持。
9.1.3 不支持的 currentColor 变量。currentColor 变量是个好东西，可以使用当前 color 计算值，即所谓颜色值。但是同样地，IE9+浏览器才支持它。
9.1.4 不支持的 rgba 颜色和 hsla 颜色。color 属性并不支持 hsl 颜色、rgba 颜色和 hsla 颜色。CSS3 中的颜色支持 Alpha 透明通道，于是就有了 rgba 颜色和 hsla 颜色，a 表示透明度，取值在 0～1，0 表示完全透明，1 表示实色无透明。
9.1.5 支持却鸡肋的系统颜色。Windows 操作系统的不同主题的弹框、工具栏之类的颜色都是不一样的，这些不一样的颜色就称为系统颜色。
可以采用使用系统色作为模块的 CSS 色值的方式实现。其好处在于以下两点。
（1）系统颜色本身有颜色，我们的模块是可以即时预览的，双击 html 模块文件就可以，没有任何其他依赖。
（2）系统颜色名称都比较高冷，非常适合作为变量，替换时不会发生冲突。