伪类选择器
伪类是专门用来表示元素的一种特殊状态，比如说常见的 a 元素的一些特殊状态（原始状态的超链接，访问过的超链接，运行中的超链接等等），当我们需要为这些处在特殊状态的元素设置样式的时候就可以使用伪类选择器来定义。
动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"
二、anchor伪类
给链接定义四个样式：
- a:link{ } 正常状态下的链接
- a:visited{ } 访问过的链接 （只能定义字体颜色color）
- a:hover{ } 鼠标悬停的链接
- a:active{ } 正在被点击的链接
伪类名称不区分大小写
实例：
1、为没访问过的链接设置颜色为蓝色（正常状态下的链接）：
a:link{ color:skyblue;}
2、为访问过的链接设置颜色为红色：
a:visited{ color:red; }
3、为鼠标悬停状态下的链接设置颜色为绿色：
a:hover{ color:green;}
4、为正在被点击的超链接设置颜色为黄色：
a:active{ color:yellow;}
:hover 和 :active 伪类不仅仅可以给超链接设置样式，也可以支持超链接以外的元素使用hover和active。但是IE浏览器不支持超链接以外的元素使用hover和active。
1 p:hover{background：yellow}
3 p:active{background：orange}
5 <p>这是一个段落</p>
浏览器如何判断链接是否访问过？浏览器通过历史记录来判断一个链接是否访问过。
由于涉及到了用户隐私，所以：visited伪类只能设置字体颜色属性。
优先顺序：如果同时设置这四个伪类，那么必须按照指定的顺序设置才能生效：a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。a:active 必须在 a:hover 之后。
二、其他伪类
- :focus 获取焦点
- ::selection 选中的元素
- :before 指定元素前（伪元素）
- :after 指定元素后（伪元素）
1、：focus获取焦点（文本输入时闪烁的光标叫获取焦点，光标消失叫做失去焦点）
例：文本框获取焦点以后，其背景颜色变成黄色
input:focus{ background:blue}
<input type="text">
获得焦点为
2、::selection为选中的内容设置样式
p::selection{background:yellow}
<p>第一个段落第一个段落第一个段落第一个段落</p>
3、在p元素后面添加文字内容
p:after{content:"会出现在元素的最后面";color:blue;}
4、在p元素前面添加文字（使用伪类元素插入的内容“会出现在元素的最前面”这部分内容不可选中）
p:before{content:"会出现元素的最前面";color:orange;}
三、选择元素的第一个或最后一个子元素（:first-child伪类和:last-child伪类）
:first-child 选择元素的第一个子元素
:last-child 选择元素的最后一个子元素
1、选择div父元素中的第一个子元素p元素，设置文字颜色为红色。
p:first-child{color:red}
<div>
<p >第一</p>
<p>第二</p>
<p>第三</p>
</div>
2、选择div父元素中的最后一个子元素p元素，设置文字颜色为黄色。
p:last-child{color:yellow;}
<div>
<p >第一</p>
<p>第二</p>
<p>第三</p>
</div>
3、选择相匹配的所有<p>元素的第一个 <em> 元素，定义文字颜色为蓝色。
p>em:first-child{color:blue}
<div>
<p >第一</p>
<p><em>第二</em></p>
<p>第三</p>
</div>
4、选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <em> 元素，定义文字颜色为橙色
p:first-child em{color:orange}
<div>
<p><em>第一</em></p>
<p><em>第二</em></p>
<p><em>第三</em></p>
</div>
