伪类&伪元素

伪类（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地址