浅析伪类和伪元素

伪类和伪元素是什么？

伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。下面我们再从定义上感受一下。

伪类

• css2中给的定义  css伪类用于某些选择器添加特殊的效果
• css3中给的定义：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

伪类的功能有两种：

1. 获取不存在与DOM树中的信息。比如<a>标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
2. 获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素，

定义在链接上面的伪类

• link：用来定义链接未被访问的样式
• visited：用来定义链接已经被访问过的样式（默认状态下是跟踪了用户的行为）

定义用户行为的伪类（显示顺序hover-focus-active）

• hover：用来定义用户用鼠标划过对应的元素，但是未激活显示的样式
• focus：用来定义一个元素本身具备焦点（接受键盘、鼠标、form的输入等）之后，显示的样式
• active：用来定义用户按下鼠标后，但是并未离开时候的样式，通常是左侧的鼠标

伪元素

简单来说就是 ：：before 和 ：：after  为什么会有两个冒号呢？其实最初是一个的，随着它的广泛运用， 为了和伪类(link,visited,hover,active)区分开来，所以用两个冒号（：：）。

• css2指出 伪元素用于某些选择器设置特殊效果
• 伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。
• 通过伪类元素添加样式，比如，颜色，背景，文本调整，字体大小调整等。

：：before在之前，：：after在之后，

比如：

            .font01::before{
				/* content一定要写，可以是空内容，因为content是来激活伪元素的。 */
				content: "很高兴";
                background: blue;	
			}
			.font01::after{
				content: "lucy!";
                background: yellow;
			}
		

			<div class="font01">
			认识你，
		    </div>

效果

 

①content一定要写，即使是空内容，因为content是用来激活伪元素的，
   没有content伪元素就失效了。
 ②伪元素不会影响结构选择器(伪元素无法通过其它选择器选中)。
 ③伪元素不会被搜索引擎收录，不会影响网页的SEO。

最后总结一下伪类与伪元素的特性及其区别：

• 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
• 伪元素本质上是创建了一个有内容的虚拟容器；
• CSS3中伪类和伪元素的语法不同；伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。
• 可以同时使用多个伪类，而只能同时使用一个伪元素；