伪类&伪元素
伪类
同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类，伪类分为UI伪类和结构化伪类。
UI伪类
CSS中已经定义好的选择器,不能随便取名
**:link ** 表示， 用户没有点击过这个链接的样式。 是英语“链接”的意思。
**:visited ** 表示， 用户访问过了这个链接的样式。 是英语“访问过的”的意思。
**:hover ** 表示， 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。
:active 表示， 用户用鼠标点击这个链接，但是不松手，此刻的样式。 是英语“激活”的意思。
在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
参考链接：
伪类 - Ren小白 - 博客园
结构化伪类
结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式
p:nth-child(n){background:red} /*表示E父元素中的第n个字节点 第一个子元素的下标是1*/
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}/*其中n是从0开始计算*/
** 经验与技巧:当“E:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。**
所有 CSS 伪类
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :active | a:active | 选择活动的链接。 |
| :checked | input:checked | 选择每个被选中的 input 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 input 元素。 |
| :empty | p:empty | 选择没有子元素的每个 元素。 |
| :enabled | input:enabled | 选择每个已启用的 input 元素。 |
| :first-child | p:first-child | 选择作为其父的首个子元素的每个 元素。 |
| :first-of-type | p:first-of-type | 选择作为其父的首个 元素的每个 元素。 |
| :focus | input:focus | 选择获得焦点的 input 元素。 |
| :hover | a:hover | 选择鼠标悬停其上的链接。 |
| :in-range | input:in-range | 选择具有指定范围内的值的 input 元素。 |
| :invalid | input:invalid | 选择所有具有无效值的 input 元素。 |
| :lang(language) | p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 p 元素。 |
| :last-child | p:last-child | 选择作为其父的最后一个子元素的每个 p 元素。 |
| :last-of-type | p:last-of-type | 选择作为其父的最后一个 p 元素的每个 p 元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :not(selector) | :not(p) | 选择每个非 p 元素的元素。 |
| :nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 p 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个p元素，从最后一个子元素计数。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个p元素的每个p元素，从最后一个子元素计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 p 元素的每个 p 元素。 |
| :only-of-type | p:only-of-type | 选择作为其父的唯一 p 元素的每个 p 元素。 |
| :only-child | p:only-child | 选择作为其父的唯一子元素的 p 元素。 |
| :optional | input:optional | 选择不带 "required" 属性的 input 元素。 |
| :out-of-range | input:out-of-range | 选择值在指定范围之外的 input 元素。 |
| :read-only | input:read-only | 选择指定了 "readonly" 属性的 input 元素。 |
| :read-write | input:read-write | 选择不带 "readonly" 属性的 input 元素。 |
| :required | input:required | 选择指定了 "required" 属性的 input 元素。 |
| :root | root | 选择元素的根元素。 |
| :target | #news:target | 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 |
| :valid | input:valid | 选择所有具有有效值的 input 元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
伪元素
最常用的是::before和::after
::before或::after都必须和content属性结合使用，content不能没有，内容至少为空；伪元素的display默认为inline
它们负责在元素的前或后添加一些样式
