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

伪类和伪元素，做为一个前端确定是都用过。而后，你问下本身到底什么是伪类？什么是伪元素？二者真正区别又是什么？是否是忽然一股懵逼涌上心头……

对于什么是伪类，什么是伪元素，一些小伙伴会知道，伪类是一个冒号的，伪元素是两个冒号的；又或者，伪类是相似于: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属性使用
• 伪类更经常使用于一些简单的动画或交互的样式，例如滑入滑出等，而伪元素更经常使用于字体图标、清除浮动等

---