一 、伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个元素，被点击的元素，鼠标移入的元素···
- 特点：一般请情况下，使用：开头,这些伪类都是根据所有的子元素进行排序
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素
特殊值： n 所有的
2n或even 选中偶数
2n+1或odd 选中奇数
- 功能跟上面相似，不同的是，这是在同类型的子元素中去选择
1、:first-of-type
2、:last-of-type
3、:nth-of-type()
二、:not() 否定伪类
- 将符合条件的元素从选择器中去除
以下为代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*去掉项目符号*/
ul {
list-style: none;
}
/* 需求一：将ul里的第一个li设置为红色 */
/* ul>li:first-child{color:red} */
//需求二：将ul里的最后一个li设置为蓝色
/* ul>li:last-child{color:blue} */
//需求三：将ul中，除了第三个li，其余的全部设置成绿色
/* ul>li:not(:nth-child(3)){color: green;} */
//需求四：将ul中，除了第三个元素，其余的全部设置为绿色
/* ul>li:not(:nth-of-type(3)){color: green;} */
//需求五：将li中的第一个元素设置为粉色
/* li:nth-child(1) {
color: pink;
} */
//需求六将li中的第一个元素设置为粉色
/* li:nth-of-type(1){
background-color: red;
} */
//需求七将li中的第一个元素设置为粉色
li:not(:first-of-type){
font-size: 50px;
}
</style>
</head>
<body>
<h1>沁园春·雪</h1>
<h3>毛泽东</h3>
<ul>
<span>测试</span>
<p>北国风光，千里冰封，万里雪飘。</p>
<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
<li>须晴日，看红装素裹，分外妖娆。</li>
<li>江山如此多娇，引无数英雄竞折腰。</li>
<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
</ul>
</body>
</html>
nth-of-type会忽略其它标签的顺序而按照标签自身种类的顺序进行筛选
nth-child是按照所有类型标签的所谓整体队列进行排序筛选，也就是说不论你是h1还是>标签，使用这个属性你要遵循在DOM树 中的顺序来进行操作
