伪类和伪元素

一：伪类：
1:定义：css伪类用于向某些选择器添加特殊效果。
伪类其实与普通的css类相相似，能够为已有的元素添加样式，可是他只有处于dom没法描述的状态下才能为文档树中的元素添加样式，因此将其称为伪类。(这种文档树没法描述的状态是什么呢？当一个元素在用户的不一样行为下就变化成不一样的状态这个行为的变化dom就没法描述，就要产生伪类，来为一些选择器添加特殊的效果)。
2:什么是文档树（DOM）？：
DOM其实是以面向对象的方式描述的文档模型，DOM定义了表示修改文档所需的对象，这些对象的行为和属性，以及这些对象之间的关系，因此能够吧DOM人文是页面上数据和结构的一个树形表示。
3:伪类选择器有哪些:
1）:link向未被访问的连接添加样式（连接，看来是只用于<a>）
2）:visited向已被访问过的连接添加样式（连接，看来仍是只用于<a>）
3）:hover当鼠标悬浮在元素上方时，向元素添加样式（没有特地指定必须是连接，因此这个标签被大量用于定义任何一个块/行元素在鼠标通过时的样式）
4）:active向被激活的元素添加样式（当鼠标点击时的样式，要注意是点击时的样式的变化，这个也不是只有超连接才能用的伪类选择器）
5）:focus向拥有键盘输入焦点的元素添加样式（如input输入框鼠标点击时产生背景颜色的变化，注意是键盘输入焦点。注意有些浏览器不支持此功能样式）
6）:first-child
用于匹配父元素中的第一个元素。例如E:first-child,找的是E元素，E元素必须是他的父元素的第一位元素（扩展【：nth-child(n)】用于匹配父元素的第n个子元素E，这个父元素必须是元素E的父元素。）。
7）:lang向带有指定lang属性的元素添加样式（在标签中设置lang的属性，在样式表中对这种确切lang属性值的元素进行样式的设定，即便你有能力为不一样的语言定义特殊的规则）
4:注意：
伪类选择器    ”：link”和“：visited“”只能用于定于连接的未被访问的样式和已被访问过的样式。
伪类选择器 “：hover“和”:active”能够用于定义任何一个块或行元素在鼠标通过时点击时的样式。
5:重点：上述四个伪类选择器的顺序必须是固定的，不然将不会产生指望中的变化。有一个好记的窍门：love hate（爱恨）。
二：伪元素：

1:伪元素用于建立一些不在文档树中的元素，而且为他添加样式，举个例子：使用伪元素”：：before”能够在一个元素前边增长一些文本，而且能够为这些文本添加一些样式，虽然用户能够看到这写文本，可是这些文本是不存在于文档树中的。
2:几种常见的伪元素：
1）:frist-letter用于向文本中的第一个字母添加样式
2）:first-line向文本的首行添加样式
3）:before在元素以前添加内容
4）:after在元素以后添加内容
3:伪元素和伪类的区别：
（1）伪类和伪元素的最大区别就在于有没有建立一个文档树之外的元素。伪元素建立了一个文档树之外的元素（虚拟容器）并为他添加样式，这个容器不包含任何DOM元素可是能够包含内容。换句话说伪类和伪元素的区别就是伪类的操做对象是文档树中已有的元素，而伪元素则建立了一个文档树之外的元素。
（2）伪类使用的是单冒号，可是在css3中规定伪元素使用的双冒号，可是除了少部分的伪元素必须使用双冒号之外，像after还有before都是支持单引号的。为了兼容性因此目前仍是在使用一些常见的伪元素的时候采用单冒号较为稳妥。