伪类&伪元素

WEB前端 224 2018-10-12 17:20

伪类(pseudo-class)& 伪元素(pseudo-element)

伪类和伪元素在web开发中用的好的话,可以说犹如神助。

但一定要分清楚,什么是伪类,什么是伪元素。

如何区分伪元素与伪类?

答:伪元素在html文档渲染后,页面中有相应的内容显示,同时能够设置它的样式,而伪类只能设置样式

伪元素和元素的区别?

答:很明显,从字面意思上来说,伪元素就不是真正的元素,而只有形而没有神,在DOM结构中根本没有它,也就是说你不能用js来操作它。(伪类可以,因为伪类是css选择器)

常见伪元素如下:

::before, ::after, ::placeholder

使用伪类和伪元素都能做些什么

  1. 伪元素
  • 作为一个占位符(清除浮动)
  • 利用 position + z-index 这样做一些图层覆盖,然后结合时间做动画
  • 定义列表元素(如:li, 或者设置盒样式为 'display:list-item;' 的元素)的标签样式

注:主要用途使用伪元素做动画比较常见。

  1. 伪类
  • 指代某一些元素
  • 指代某个位置的元素

注:主要用途指代某些元素,并设置样式。

伪类和伪元素的分类列表github地址

文章评论