伪类与伪元素的区别

CSS伪类

伪类是用来定义元素特殊状态的，他可以用来设置鼠标悬停样式、元素获取焦点样式、设置链接样式等。如常见的 hover、active、link 等都是伪类。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
• 伪类的名称不区分大小写。

CSS - :first - child 伪类

:first-child 伪类来选择元素的第一个子元素

CSS伪元素

它本身只是基于元素的抽象，并不存在于文档中，不是真正的页面元素，所以称为伪元素。
但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
特点：
伪元素是通过样式来达到元素效果的，也就是说伪元素不占用dom元素节点，引用::before和::after伪元素的主要特点如下：

• 伪元素不属于文档，所以js无法操作它；
• 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件；
  优点：
• 减少dom节点数；
• 让css帮助解决部分js问题，让问题变得简单；

缺点：

• 不利于SEO；
• 无法审查元素，不利于调试；

CSS - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。
在每个

元素前面插入一幅图片：

h1:before
{
content:url(smiley.gif);
}

CSS - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

还有很多很多，汇总在下方
所有CSS伪类/元素

注意
伪元素::before和::after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置::before和::after时必须设置其content属性，content必须有值，至少是空。否则伪元素就不起作用。

总结