精灵图(十二)

1.伪类选择器

E::first-letter文本的第一个单词或字

E::first-line 文本第一行;

E::selection 选中全部文本.

div::befor {
  content:"开始";
}                    在div元素的开始位置添加一个元素
div::after {
  content:"结束";
 }                 在div元素的结束位置添加一个元素.

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

注意

伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

2.精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）

各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。