学习笔记---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：