CSS 伪类和伪元素区别及常用伪类伪元素

伪类（pseudo class）和伪元素（pseudo element）都是前端开发中经常接触的概念，但是这两个概念特别容易搞混。

什么是伪类、伪元素？

伪类：以冒号（:）开头，用于选择处于特定状态的元素。

伪元素：以双冒号（::）开头，用于在文档中插入虚构的元素。

伪类举例：

a:hover {
  color: red;
}

hover表示了a标签的某种状态（鼠标指针悬浮在a上时），选择器选择的是伪类前面的元素（a），当出现伪类描述的状态（元素处于悬浮状态）时，样式才生效

伪元素举例：

div::before {
  content: '老司机';
}

before的作用是在内容元素之前创建一个不在文档树中的元素，选择器选择的不是div，而是浏览器自动创建了一个虚拟的元素。

结论：

伪类用于向某些已经存在的选择器添加特殊效果，其本质还是类（class），作用于标签本身，但是限定了状态条件。

伪元素用于将效果添加到不存在的虚拟元素中，本质是元素（element），作用于该虚拟元素。

常见伪类：

:active元素处于活动状态时
:focus元素已获取焦点时
:hover元素处于悬浮状态时
:link链接未访问时
:visited链接已访问时
:first-child元素是首个子元素时
:last-child元素是最后一个子元素时
:nth-child()元素是第 n 个子元素时
:nth-last-child()元素是倒数第 n 个子元素时
:only-child元素是唯一子元素时
:first-of-type元素是首个特定类型的子元素时
:last-of-type元素是最后一个特定类型的子元素时
:nth-of-type()元素是第 n 个特定类型的子元素时
:nth-last-of-type()元素是倒数第 n 个特定类型的子元素时
:only-of-type元素是唯一的特定类型的子元素时
:not不满足指定条件时
:target元素 id 匹配到哈希值时
:root元素是文档树的根元素时
:lang()匹配到指定语言时
:empty元素处于没有子元素状态时
:invalid 和 :valid表单项是否有效
:required 和 :optional表单项是否必填
:in-range和 :out-of-range表单项是否超出范围
:read-only和 :read-write表单项是否只读
:enabled和 :disabled表单项是否禁用

常见伪元素：

::first-letter选中块状元素中的首字母
::first-line选中首行
::before在之前创建一个不在文档树中的元素
::after在之后创建一个不在文档树中的元素
::placeholder选中表单元素的占位文本
::file-selector-button选中类型为 file 的 input 里面的 button