【愣锤笔记】你真的了解什么是伪类和伪元素吗

伪类和伪元素，作为一个前端肯定是都用过。然后，你问下自己到底什么是伪类？什么是伪元素？两者真正区别又是什么？是不是突然一股懵逼涌上心头……

对于什么是伪类，什么是伪元素，一些小伙伴会知道，伪类是一个冒号的，伪元素是两个冒号的；又或者，伪类是类似于:hover这样的，伪元素是类似于:before或::before这样的。然后，对于这样的回答，肯定是不能令自己满意的。我们今天就彻底聊一聊伪类和伪元素吧。

伪类，什么是伪类？

看下w3c对于伪类的定义：

CSS伪类是用来添加一些选择器的特殊效果。
伪类是基于元素的特征而不是他们的id、class、属性或者内容。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式，所以它是基于文档之外的抽象。

先说伪类的用法：

是一个以冒号:作为前缀，被添加到一个选择器末尾的关键字，例如：:active :hover :link :visited。

css中的伪类及其功能描述

伪类	描述	level
:link	用来选中元素当中的链接。它将会选中所有尚未访问的链接。遵循LVHA顺序	1
:visited	表示用户已访问过的链接。遵循LVHA顺序	1
:active	匹配被用户激活的元素。即鼠标主键按下的元素或者tab键选中的元素，并不限于a和button。遵循LVHA顺序	1
:lang()	基于元素语言来匹配页面元素,eg:p:lang(en)	2
:first-child	一组兄弟元素中的第一个元素	2
:focus	表示获得焦点的元素	2
:hover	滑过元素时，pc端指鼠标，移动端指触摸（通常会有bug）	2
:target	代表一个唯一的页面元素(目标元素)。例如：http://www.example.com/index.html#section2该片段指向一个ID为section2的页面元素	3
:root	匹配文档树的根元素,除了优先级更高之外，与html选择器相同	3
:nth-child()	找到所有当前元素的兄弟元素中符合条件的元素，例如2n+1就是查找1，3，5，7等	3
:nth-of-type()	查找符合条件的相同元素类型的兄弟元素	3
:nth-last-of-type()	从后往前查找符合条件的相同类型的兄弟元素	3
:last-child	一组兄弟元素中的最后一个元素	3
:first-of-type	一组兄弟元素中的具有相同元素类型的第一个元素	3
:last-of-type	一组兄弟元素中的具有相同元素类型的最后一个元素	3
:only-child	唯一的一个子元素	3
:only-of-type	代表了任意一个元素，这个元素没有其他相同类型的兄弟元素	3
:empty	代表没有子元素的元素，子元素有空格和文本都不行，但可以是注释	3
:not()	它匹配不符合参数选择器描述的元素，不能包含另一个not选择器	3
:enabled	表示任何启用的（enabled）元素。如果一个元素能够被激活或获取焦点，则该元素是启用的	3
:disabled	表示任何被禁用的元素	3
:checked	表示任何处于选中状态的radio/checkbox	3
:indeterminate	表示状态不确定的表单元素	3
:default	表示一组相关元素中的默认表单元素	3
:valid	表示任意内容通过验证的<input>或其他 <form>元素	3
:invalid	表示任意内容未通过验证的<input>或其他 <form>元素	3
:in-range	代表一<input> 元素，其当前值处于属性min 和max 限定的范围之内	3
:out-of-range	代表一个<input>元素，其当前值处于属性min 和max 限定的范围外	3
:required	表示任意拥有required属性的<input> 或<textarea>	3
:optional	表示任意没有required属性的 <input>``<select>或<textarea>	3
:read-only	表示元素不可被用户编辑的状态	3
:read-write	代表一个元素可以被用户编辑	3

这里只列举到css3级别的伪类，css4目前还未在个大浏览器统一实现，暂不列举说明。

LVHA顺序：:link — :visited — :hover — :active，在使用这些伪类的时候，要保证元素的样式被正确渲染，请确保其css样式的书写书写按照这个顺序。

对于伪类，其实可以理解为是元素的一个状态，我们可以为这个状态添加一些样式。比如div的滑过状态div:hover{}，输入框的聚焦状态input:focus {}，又或者a标签的访问过的状态a:visited {} 但是对于伪类

伪元素，什么是伪元素？

伪元素是创造DOM之外的对象
伪元素可以为一些在源文档中不存在的内容分配样式。
伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

伪元素的用法：

是2个以冒号::作为前缀，被添加到一个选择器末尾的关键字，例如：::before 或者 ::after。

css中的伪元素及其功能描述

伪元素	功能描述	level
::after	用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素	2
::before	创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。	2
::first-letter	选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容	1
::first-line	在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小	1
::selection	应用于文档中被用户高亮的部分	4，WD草案

伪元素before和:after的使用场景

在一些主流的css框架中，例如Bootstrap，对于这两个伪元素的使用还是蛮多的。我们在日常开发中也经常使用这两个元素进行一些妙用。

• 清除浮动
• 写一个三角形/或者一个tip框
• 写一个箭头/叉 …… 这些都是很常见的一些小效果，当然还有其他更有意思的效果。这里就不多做赘述了，有兴趣的小伙伴可以试着写一写。

总结一下：

• 伪类的受体是文档树中已有的元素，而伪元素则创立了一个DOM外的元素
• 伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
• 伪类使用一个冒号（例如:hover），css3标准伪元素使用两个冒号（例如::before)，css2中的没有区分伪类和伪元素的用法，因此css2中伪元素也可以使用一个冒号。
• PC端更推荐单冒号写法，移动端更推荐双冒号写法
• before/after伪元素需要配合content属性使用
• 伪类更常用于一些简单的动画或交互的样式，例如滑入滑出等，而伪元素更常用于字体图标、清除浮动等

---

转载于:https://juejin.im/post/5ca22bae6fb9a05e1e523a5d