学习笔记---css中伪元素与伪类（迷惑我的:after与:hover）
一直被伪类与伪元素所迷惑，以为是同一个属性名称，这两天看css动画，越来越多的看到诸如 a:hover:after，a.hover:after 的用法，越来越糊涂，索性翻翻定义研究研究。
本文出现的伪类伪元素均为css2、css1中内容。css3中伪类、伪元素还未做整理。
先看定义：
伪元素：（pseudo-element）是HTML 中并不存在的元素。用于将特殊的效果添加到某些选择器。
W3C：
| 属性 | 描述 | CSS |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
以下是CSS3中对伪元素的描述：
伪元素的由两个冒号::开头，然后是伪元素的名称 。
使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::
一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
从定义当中我们可以知道，伪元素原来在DOM结构中不存在的。伪元素创建了一个容器，这个容器不包含在DOM结构中，但是有内容，使用 “content” 来添加内容，可以对其进行样式的自定义，可以获取其中的内容。为了规范，我们在伪元素前面加两个冒号，比如::after，但是为了兼容性，仍然使用了一个冒号的形式。
例如： 这是没有添加伪元素的代码和网页截图。
当我在 .div1 之前加上:before之后，样子是这样：
可以看到，:before里的内容添加在了相对.div1内容之前，同理，:after中的内容会出现在.div1 内容之后。当然如果对他们进行位置的设置，这种前后就只是一个说法上的区别了。
在我看来，:after 与:before的用处最大在于，可以减少html代码里的节点个数及内容，优化代码阅读。当我要在特定区间加入某些内容时，只用在css样式表中利用:after与:before来输入内容样式，但更多的，可以结合伪类:hover 来设置动画样式。
这里在提一点，如果我们利用伪元素来进行动画设置，需要给父元素添加样式{position：relative；}，给:after或者:before添加{position:absolute;}
另外，:after还有一个妙用，那就是清除浮动，给父元素追加:after之后，设置content：“ ”;clear:both; 就可以清除浮动，详情还可以戳学习笔记---css中清除浮动的方法
另外两个相对于来说，更不常用，所以我也就没有深究，用到再说吧~
下面看看伪类：
伪类：(pseudo-class）则应用于一组HTML 元素。用于向某些选择器添加特殊的效果。
W3C：
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
css3中定义：
伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。
并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。
从定义得知，伪类的作用是获取页面中不存在的信息。比如 标签中的:linked :visited,这些内容不存在页面当中，只能通过css选择器来获取。
且一个元素可以同时设置多个伪类效果。
a:link{color: #FF0000} /* 未访问的链接 */a:visited{color: #00FF00} /* 已访问的链接 */a:hover{color: #FF00FF} /* 鼠标移动到链接上 */a:active{color: #0000FF} /* 选定的链接 */
这里要注意的是，这几个伪类如果同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，效果不生效。
最后来总结下伪类与伪元素的区别：
1.引用博主（@denied）的总结，伪类与伪元素的根本区别在于它们是否创造了新的元素(抽象)。
从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。
2.一个元素可以同时添加多个伪类，而每一次只能对一个伪元素进行操作。
3.书写形式上的区别，单冒号是伪类，双冒号是伪元素（但这点不能作为绝对区分的点）。
W3C：