伪类选择器中的伪类表示元素的状态、排序、鼠标是否悬停、是否已被访问过、光标是否指向等。使用伪类选择器，就可以得到诸如有鼠标悬停的元素、父元素下的第n个子元素、已被访问过的链接等使用基本选择器无法进行区分的元素。
一、 结构化伪类
结构化伪类：根据文档的结构来选取元素。
样例代码如下：
//CSS代码
ul{margin:0;}ul > li {display: inline-block;height: 25px;line-height: 25px;width: 25px;font-size: 15px;text-align: center;background-color: rgb(129, 195, 226);border-radius: 50px;margin: 5px;}
//HTML代码
<ul class="test"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></br><ul class="test_one"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>
执行效果:
1.1、:nth-child(n)
选择器中的n表示一个简单的表达式，它是一个大于等于0的整数
将第2个<li>元素设置为如下样式：
li:nth-child(2){background-color:green;color:white;}
执行效果:
将第全部<li>元素设置为如下样式：
li:nth-child(n){background-color:green;color:white;}
注意：这里只能用字母n来表示。
执行效果:
将<li>元素位置为偶数位的设置为如下样式
li:nth-child(2n){background-color:green;color:white;}
注意：如果这里取3n的话则会选取3、6、9项，如果取2n+1则会选取所有的奇数项，依次类推即可。
执行效果:
1.2、:nth-last-child(n)
它起的作用就和“:nth-child”选择器获取元素的顺序正好相反，是从最后一个元素开始计算
li:nth-last-child(2){background-color:green;color:white;}
执行效果:
1.3、:nth-of-type(n)
“:nth-of-type(n)”选择器和前面介绍的“:nth-child(n)”类似，它是根据类型确定第几个元素,区别可以看下面的例子。
样例代码如下：
//CSS代码
ul{margin:0;}ul > li,ul > div {display: inline-block;height: 25px;line-height: 25px;width: 25px;font-size: 15px;text-align: center;background-color: rgb(129, 195, 226);border-radius: 50px;margin: 5px;}li:nth-of-type(3){background:green;color: white;}
//HTML代码
将第一个ul中的第三个li给为div
<ul class="test"><li>1</li><li>2</li><div>3</div><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></br><ul class="test_one"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>
执行效果:
修改样例中的CSS如下：
ul{margin:0;}ul > li,ul > div {display: inline-block;height: 25px;line-height: 25px;width: 25px;font-size: 15px;text-align: center;background-color: rgb(129, 195, 226);border-radius: 50px;margin: 5px;}li:nth-child(3){background:green;color: white;}
执行效果:
1.4、:nth-last-of-type(n)
“:nth-last-of-type(n)”选择器和前面的“:nth-of-type(n)”的区别只是获取元素的顺序相反，是从最后一个元素开始计算
1.5、:first-of-type和:last-of-type
:first-of-type相当于:nth-of-type(1)，:last-of-type相当于:nth-last-of-type(1)
1.6、:last-child
“:last-child”选择的是最后一个子元素。比如说，我们需要单独给列表最后一项设置不同的样式，就可以使用这个选择器。
li:last-child{background:green;color:white;}
执行效果如下：
1.7、:only-child
父元素只有一个子元素,这个选择器才会生效。
样例代码如下：
//CSS代码
p:only-child{color:red;}
//HTML代码
<div><p>❤❤❤❤❤</p></div><div><span>❤❤❤❤❤</span></div><div><p>❤❤❤❤❤</p><p>❤❤❤❤❤</p></div>
执行效果:
1.8、:only-of-type
基本与only-child相同
1.9、:root
选择文档的根元素，对于HTML文档来说，根元素永远是<html>标签，因此建议在实际开发中使用标签html代替:root。示例如下：
/*这两段代码是等效的*/:root{background:white;}html{background:white;}
1.10、:empty
“:empty”是用来选择没有任何内容（包括空格）的元素。
样例代码如下：
//CSS代码
p:empty{display:none;}
//HTML代码
<div><p>❤❤❤❤❤</p></div><div><p></p><p></p></div>
执行后下面的两个p将不占用空间。
二、目标伪类:target
超链接元素的锚点通过#id指向的元素（target element），就是目标元素，而“:target”选择器就可用于选取当前活动的目标元素，例如：
//CSS代码
:target{color :red;}
<a href="#p1">1、变红</a> | <a href="#p2">2、变红</a><p id="p1"><b>1、❤❤❤❤❤</b></p><p id="p2"><b>2、❤❤❤❤❤</b></p>
三、状态伪类
用于表示表单元素的状态伪类选择器。
3.1、:enabled和:disabled
input:disabled{opacity:0;}
将被禁用的input元素设置为透明
3.2、:checked
input:checked{opacity:0;}
将被选中的输入框设置为透明
四、否定伪类:not(S)
:not(selector)选择器匹配非指定元素/选择器的每个元素
:not(p){background-color: red;}
p标签以外的所有HTML元素的背景颜色都设置为红色
div :not(.test){background: red}
div的子元素中，class不为test的所有其他元素
