伪类

1、链接伪类

　　a:link { color: black; }　　　// 链接的原始状态

　　a:visited { color: gray; }　　// 已经点击过的状态

　　a:hover { color: green; }　　// 鼠标指针正悬停在链接上的状态

　　a:active { color: red; }　　　// 链接正在被单击的状态（鼠标在链接上按下，还没释放）

　　提示：最好按照以上四个状态的顺序编写 CSS 样式，否则浏览器的解析与你的期望会不一致。

2、:focus 伪类

　　:focus { border: 1px solid blue; }　　// 当元素获得焦点时

3、:target 伪类

　　:target { background: #eee; }

　　// 如果点击一个指向页面中其他元素的链接，则那个元素就是 target，示例：

　　#bbb:target { background: red; }

　　<a href="#bbb">More ... </a>

　　当点击以上链接后，页面会跳转到 #bbb 元素处，同时  #bbb 元素的背景色变为 red。

4、:first-child 和 :last-child

　　li:first-child { colro: blue; }　　// 表示同胞元素中的第一个 li 元素

　　p:last-child { colro: blue; }　　// 表示同胞元素中的最后一个 p 元素

5、:nth-child

　　li:nth-child(n) { colro: blue; }　　// 此处的 n 有多种值

　　当为 even 时，表示所有偶数位置的元素

　　当为 odd 时，表示所有的奇数位置的元素

　　当为 n 时，表示从第 0 个元素开始，指所有元素。（第0个元素并不存在，但是计算时假设它存在）。

　　当为 n + 1 时，表示从第 1 个元素开始，实际效果与 n 时一样。（第0个元素并不存在，但是计算时假设它存在）。

　　当为 n + 2 时，表示从第 2 个元素开始，也就是除第 1 个元素之后的所有元素

　　当为 n + 3 时，表示从第 3 个元素开始，也就是除第 1 个元素和第 2 个元素之后的所有元素

　　“+ 几” 表示从第几个元素起，开始使用 CSS 样式。

　　当为 2n 时，表示偶数位置的元素，意思与 even 一样。

　　当为 2n + 1时，表示从第 1 个元素开始，意思与 odd 一样。

　　当为 2n + 2时，表示从第 2 个元素开始，意思与 even 一样。

　　当为 2n + 3时，表示从第 3 个元素开始，往后的偶数位置元素。

　　当为 3n 时，表示每隔 2 个元素，

　　当为 4n 时，表示每隔 3 个元素，

5、::first-letter

　　p::first-letter { font-size: 200%; }

　　// 表示段落的第一个字符

6、::first-line

　　p::first-line { font-size: 200%; }

　　// 表示段落的第一行内容

7、::before

　　p.age::before { content: "Age: "; }

　　<p class="age">23</p>

　　// 意思是在 p 元素的前面插入某些内容，此示例的内容为 “Age：”。

8、::after

　　p.art::after { content: " ... "; }

　　<p class="art">more</p>

　　// 意思是在 p 元素的后面插入某些内容，此示例的内容为 “ ... ”。