1. :link :visited :hover :avtive
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
顺序要求：
- 在CSS定义中，a:hover要放在a:link和a:visited之后才有效；
- a:active要放在a:hover后面才有效，需要严格按顺序才能看到效果
2.结构性伪类选择器：
X:nth-child(n)：选择所有 p 元素的父元素的第n个子元素
"n"可以是数字1、2、3、4...，也可以是表达式2n、2n+1、-n+3等，还可以是关键词odd/even。
p:nth-child(n){background:green} 表示p父元素中的第n个元素（且为p）
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}/*选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border: 1px solid orange;
height: 15px;
width: 100px;
font-size: 12px;
}
p:nth-child(1){
background: green;
}
</style>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
</div>
</body>
</html>
- nth-child选择器在计算子元素是第几个元素时，是连同所有父元素中所有子元素一起计算的。
此代码演示效果：（span是第一个元素，但是代码中匹配的时p,因此最终未选中任何元素）
X:first-child： 选择器匹配其父元素中的第一个子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border: 1px solid orange;
height: 15px;
width: 100px;
font-size: 12px;
}
span:first-child{
background: green;
}
</style>
</head>
<body>
<div>
<span>div的第一个子元素为span标签</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
</div>
</body>
</html>
X:last-child:匹配父元素中最后一个X元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border: 1px solid orange;
height: 15px;
width: 100px;
font-size: 12px;
}
p:last-child{
background: green;
}
</style>
</head>
<body>
<div>
<span>div的第一个子元素为span标签</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
</div>
</body>
</html>
X:nth-last-child(n):从最后一个开始算索引
p:nth-last-child(4){
background: green;
}
X:only-child(n):选择器匹配属于父元素中唯一子元素的元素。
X:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素。
X:first-of-type:匹配元素其父级是特定类型的第一个子元素。
p:first-of-type
{
background:#ff0000;
}
/*选择的 p 元素是其父元素的第一个 p 元素,和 :nth-of-type(1) 是一个意思。*/
X:last-of-type:匹配其父级的最后一个特定类型为X的子元素。
/*指定其父级的最后一个p元素的背景色*/
p:last-of-type
{
background:#ff0000;
}
X:nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素。
X:only-of-type:这个元素没有其他相同类型的兄弟元素。
方便记忆(两组)：
X：nth-child(n)
X: first-child
X: last-child
X: nth-last-child(n)
X: only-child
X: nth-of-type(n)
X: first-of-type
X: last-of-type
X: nth-last-of-type(n)
X: only-of-type