伪类&伪元素

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

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

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

如何区分伪元素与伪类?

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

伪元素和元素的区别?

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

常见伪元素如下:

::before, ::after, ::placeholder, ::marker, ::backdrop

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

  1. 伪元素
  • 作为一个占位符(清除浮动)
  • 利用 position + z-index 这样做一些图层覆盖,然后结合时间做动画
  • ::maker 定义列表元素(如:li, 或者设置盒样式为 ‘display:list-item;’ 的元素)的标签样式
  • ::backdrop 这个伪元素可以用来做对话框的mask,但是有一个前提是它必须是在使用HTML5元素dialog的情况下,其他元素没这个效果。具体的使用和兼容性可参考dialog

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

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

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

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

    原文作者:缘自世界
    原文地址: https://www.jianshu.com/p/67448433aea9
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞