学习笔记---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结构改变，伪类也可以是动态的。

从定义得知，伪类的作用是获取页面中不存在的信息。比如<a></a> 标签中的:linked :visited,这些内容不存在页面当中，只能通过css选择器来获取。

且一个元素可以同时设置多个伪类效果。

其中，运用伪类最多的是<a></a>添加链接样式。

a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

这里要注意的是，这几个伪类如果同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，效果不生效。

最后来总结下伪类与伪元素的区别：

1.引用博主（@denied）的总结，伪类与伪元素的根本区别在于它们是否创造了新的元素(抽象)。

从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。

2.一个元素可以同时添加多个伪类，而每一次只能对一个伪元素进行操作。

3.书写形式上的区别，单冒号是伪类，双冒号是伪元素（但这点不能作为绝对区分的点）。

W3C：