伪类 单冒号 ```javascript :hover 将样式添加到鼠标悬浮的元素 :active 将样式添加到被激活的元素 :focus 将样式添加到获得焦点的元素 :link 将样式添加到未被访问过的链接 :visited 将样式添加到被访问过的链接 :first-child 将样式添加到元素的第一个子元素 :lang 定义指定的元素中使用的语言 ``` 伪元素 单双冒号都可 ``` ::first-letter 将样式添加到文本的首字母 ::first-line 将样式添加到文本的首行 ::before 在某元素之前插入某些内容 ::after 在某元素之后插入某些内容 ``` <hr> ## 伪类和伪元素区别 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 - 伪类 由于状态是动态变化的，所以一个元素达到一个特定状态时，他可能得到伪类的样式；当状态改变时，他又失去这个样式。**存在DOM文档中** 表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式，如：a:hover，（:first-child :link :visitive :hover :focus :lang） - 伪元素 主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，**不会出现在DOM中**，不可复制，仅仅是在CSS渲染层加入。 <hr> ## CSS3新增伪类伪元素 ``` x:first-of-type → 选择属于其父元素的首个 <x> 元素的每个 <x> 元素 x:last-of-type → 选择属于其父元素的最后一个 <x> 元素的每个 <x> 元素 x:only-of-type 选择属于其父元素唯一的 <x> 元素的每个 <x> 元素 x:only-child 选择属于其父元素的唯一子元素的每个 <x> 元素 x:nth-child(1) 选择属于其父元素的第一个子元素的每个 <x> 元素 :enabled 每个已启用的元素（多用于表单元素 例如input） :disabled 控制表单控件的禁用状态 :checked，单选框或复选框被选中 :before在元素之前添加内容（可用来做清除浮动） :after在元素之后添加内容 ```