伪类用于定义元素的特殊状态。
如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
本文只列举了一部分应用，其他的可以看CSS 伪类 (w3school.com.cn)
元素:first-child
选择作为其父的首个为当前元素的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* ul 的第一个子元素 */
ul li:first-child {
background: #ff008a;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html> 
元素:last-child
选择作为其父的最后一个为当前元素的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* ul 的最后一个子元素 */
ul li:last-child {
background: aqua;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
元素:nth-child(n)
选择作为其父的第 n 个是当前元素的子元素
注意：如果第 n 个元素不是当前元素，那么选择不到元素，样式不生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 元素:nth-child(n)：定位到当前元素的父元素，选择父元素中第n个是当前元素的元素
注意：如果第n个元素不是当前元素，那么即选择不到元素，样式不生效
如下面是 定位到p元素的父级元素，选择父级元素的第一个是p元素的元素
*/
p:nth-child(1) {
background: chartreuse;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
元素:nth-of-type(n)
选择作为其父的第 n 个是当前元素的子元素（只统计是当前元素的元素）
如下面的例子，如果按 nth-child(2) 选择，那么将不会生效，因为第二个元素是 h1 不是 p，而 nth-of-type(2) 只会找 p 元素的第二个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 元素:nth-of-type(n)：选中父元素下的第n个当前元素（只计算当前元素）
如下面是 选择p元素的父元素下的第二个p元素
*/
p:nth-of-type(2) {
background: rebeccapurple;
}
</style>
</head>
<body>
<h1>我是标题1</h1>
<h1>我是标题2</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
元素:hover
鼠标悬停于当前元素时，选择当前元素
如下面的例子：鼠标悬停于 p 元素时，添加背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:hover {
background: chartreuse;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>下图是鼠标悬停在上面的结果
