伪元素选择器
first-letter：选择文本首字母
first-line：选择文本的第一行
after：在元素前面添加内容
before：在元素后面添加内容
9.选择器总结
什么是选择器？
选择器：描述后面的样式施加到那些目标，或者说根据某个依据来选择应用的样式的目标
根据选择依据不同，就产生了各种不同的选择器
1.元素选择器
div{ background-color:red}
2.id选择器
根据元素的ID属性来选择
格式：#idname{xxxxx}
#username{font-size：25px}
3.类选择器
根据元素的class属性来选择
格式：classname{xxxxx}
.passwd{font-size：20px}
4.属性选择器
根据属性的特征来选择应用样式的目标，从这意义上来讲，它包含的id选择器和类选择器
[title]：选择设置了title属性的元素
[title=“tt”]：选择了title属性等于“tt”的元素
[title^=“tt”]：选择了title属性以“tt”开头的元素
[title$=“tt”]：选择了title属性以“tt”结尾的元素
[title~=“tt”]：选择了title属性包含完整单纯“tt”的元素
[title*=“tt”]：选择了title属性包含“tt”的元素
5.关系选择器
根据元素间的家族关系来选择目标
这些细节记不住没干系，看一下能认识就行
6.伪元素.伪类选择器
伪元素：其效果等同于增加一个元素，所以称之为伪元素
伪类：其效果等同于增加一个类，所有称之为伪类
7.组合选择器
多个选择如果想应用同一个样式，可以用逗号隔开
4.布局
4.1文档流
所谓文档流就是按照元素的顺序从左到右、由上而下的方式排列。
4.2 定位
默认的文档流很多时候不能满足我们的布局要求，需要更丰富的布局手段，这就需要用到定位了。定位方式有：static、fixed、relative、absolute。
static静态定位（默认的）
无定位，元素正常出现在流（文档流）中
不受left，right，top，bottom的影响
relative 相对定位
absolute绝对定位
z-index：
为了处理样式重叠事件，我们需要用到z-index
数值越大，等级越高
定位总结
（1）标准文档流按照从左到右、自上而下的方式依次排列元素。若要改变默认布局方式则需用relative、absolute、fixed等定位方式；
（2）relative是相对于其原有位置进行偏移；
（3）absolute是相对于其父容器进行偏移，注意其父容器必须是有定位的，即非默认（static）定位方式，否则会一直往上追溯，直到页面；
（4）fixed是相对于整个页面进行偏移。
（5）relative不会从标准文档流里脱离，但是absolute和fixed是都会从文档流里脱离出来
浮动
通过设置float使得元素从原本的文档流脱离出来，感觉像浮在原本的文档流上面。
案例：
代码实现：
我们做这个案例的时候，会遇到这种情况：
这是因为div5被浮动的div2，div3，div4覆盖了，但还是可以通过
调试工具查看到
那么怎样能让它正常显示呢
在div4后面加上一个clear
.clear{ clear:left;}