css 伪类
1.动态伪类
使用举例：
- a:link 未访问的连接
- a:visited 已访问的连接
后两个也可以应用在其他场景 - a:hover 鼠标移到连接上去（hover用的非常多）
- a:active 激活的连接（鼠标在连接上长按住未松开）
使用注意：
- :hover必须放在 :link和 :visit 后才能完全生效
- :active必须放在:hover后面才能完全生效
示例代码如下
Title
"#">SWSUT
"#">swust
"test1">西南科技大学
2.结构伪类
一.:nth-child()
:nth-child() 我们可以这样理解，nth是第n个的意思，child是孩子的意思。所以其意为选中第几个子类，案例如下所示。
案例一：
"en">
"UTF-8">
Title
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
西南科技大学5
西南科技大学6
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
zzx
zzx
我们把body元素看做父元素，
zzx
zzx
就成了第三个子元素
案例二：
"en">
"UTF-8">
Title
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
西南科技大学5
西南科技大学6
zzx
zzx
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
案例三：
nth-child(n)的用法，n的取值为自然数，选择子元素顺序为n的。
"en">
"UTF-8">
Title
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
西南科技大学5
西南科技大学6
zzx
zzx
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
案例四：nth-child(2n),选择偶数子类
"en">
"UTF-8">
Title
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
西南科技大学5
西南科技大学6
zzx
zzx
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
案例五，用nth-child实现排行榜：前五名标红
利用nth-child(),因为n的取值为自然数，所以-n+5的取值为5，4，3，2，1。也就是取前5位
"en">
"UTF-8">
Title
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
西南科技大学5
西南科技大学6
西南科技大学7
西南科技大学8
西南科技大学9
案例六：要区分后代选择器和交集选择器
后代选择器
"en">
"UTF-8">
Title
西南科技大学1
西南科技大学2
内容1
内容2
交集选择器
"en">
"UTF-8">
Title
西南科技大学1
西南科技大学2
内容1
内容2
混合
"en">
"UTF-8">
Title
西南科技大学1
西南科技大学2
补充
内容1
内容2
二. nth-last-child()
"en">
"UTF-8">
Title
"zzx">西南科技大学1
"zzx">西南科技大学2
"zzx">西南科技大学3
"zzx">西南科技大学4
"zzx">西南科技大学5
西南科技大学6
西南科技大学7
西南科技大学8
西南科技大学9
三.nth-of-type()
在对这个伪类进行介绍前，我们先做一个对比。
首先我们使用nth-child()
Title
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
西南科技大学5
西南科技大学6
西南科技大学7
西南科技大学8
西南科技大学9
结果为
然后，我们使用nth-of-type()
Title
西南科技大学1
西南科技大学2
西南科技大学3
西南科技大学4
西南科技大学5
西南科技大学6
西南科技大学7
西南科技大学8
西南科技大学9
我们可以发现，nth-child(3)寻找所有子元素中的第三个元素。而nth-of-type(3)只能寻找子元素中所有p元素中的第三个元素，跳过了span。
三. 伪元素 ::after 和 ::before
我们不要把他们看做css属性，而是看做元素，具有添加元素的功能。
下面我们实现的是在西南科技大学前添加swust文本，
在西南科技大学后添加一张图片。
Title
西南科技大学
备注：我们可以把伪元素看做行内元素，因为其不支持width属性，就像span等元素一样。但是当我们就想改变其宽度和高度时，需要改掉其这个特性，于是我们可以设置：
span::before{
content: "SWUST";
color: red;
display: inline-block;
width: 100px;
background-color: fuchsia;
}
