阅读 811

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

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

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

伪类,什么是伪类?

看下w3c对于伪类的定义:

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

先说伪类的用法:

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

css中的伪类及其功能描述
伪类 描述 level
:link 用来选中元素当中的链接。它将会选中所有尚未访问的链接。遵循LVHA顺序 1
:visited 表示用户已访问过的链接。遵循LVHA顺序 1
:active 匹配被用户激活的元素。即鼠标主键按下的元素或者tab键选中的元素,并不限于abutton。遵循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属性使用
  • 伪类更常用于一些简单的动画或交互的样式,例如滑入滑出等,而伪元素更常用于字体图标、清除浮动等

关注下面的标签,发现更多相似文章
评论