CSS中的伪类与伪元素

在前端开发中，大家或多或少的有接触过CSS伪类和伪元素，使用伪元素的时候，总感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢?

在 W3C 中定义：

　　伪类：用于向某些选择器添加特殊的效果。应用于一组 HTML 元素。

　　伪类的作用获取页面中不存在的信息，即通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。一个元素可以同时设置多个伪类效果。伪类名称对大小写不敏感。

　　伪类有以下几种，截图引自W3School：

　　注：

　　　　a:link  /* 未访问的链接 */

　　　　a:visited  /* 已访问的链接 */

　　　　a:hover /* 鼠标移动到链接上 */

　　　　a:active /* 选定的链接 */

　　这几个伪类如果同时出现在一个元素的操作上，顺序不能改变(可以按照 love hate 来记)，否则很大程度上会产生紊乱，效果不生效。

　　css3 中新增伪类：

　　伪元素：用于向某些选择器设置特殊效果。

　　伪元素是DOM结构中并不存在的元素，但在用法上跟真正的dom无本质区别。伪元素创建了一个容器，如果有内容，使用 “content” 来添加内容，可以对其进行样式的自定义，也可以获取其中的内容。为了规范，我们在伪元素前面加两个冒号，比如::after，但是为了兼容性，仍然使用了一个冒号的形式。一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

　　伪元素有以下几种：

　　使用伪元素可以减少html代码里的节点个数及内容，优化代码阅读。当需要在特定区间加入某些内容时，只用在css样式中利用:after与:before来输入内容样式，也可以结合伪类 :hover 来设置动画样式。 另外两个对于我不常用，也没有深究，等用到再来补充吧~~　

　　注：

　　　　使用伪元素，需要给父元素添加样式{ position: relative; }，给 :after 或 :before 添加{ position: absolute; }

以上，单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。CSS3为了区分伪类和伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，但是也不能仅仅以单双冒号来区分两者。

总结：　　

• 伪类和伪元素都可以向选择器添加特殊效果
• 伪元素本质上是创建了一个有内容的虚拟容器
• 可以同时使用多个伪类；而伪元素一次只能使用一个，并且只能出现在末尾

• 在计算权重的时候，伪类与类优先级相同，伪元素与标签优先级相同