Hello，大家好！
我是Kiangkiang。从今天开始会把自己学的知识写成文章，一来是方便自己查阅，二来也希望对大家有帮助。文章内容可能不全，但是会慢慢补充。
伪类知识点：
伪类（不存在的类，特殊的类）
·伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素...
·伪类一般情况下都是使用 “ ：” 开头的
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0~正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
-以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
: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>li:first-child{
color:aqua;
} /* 第一个元素的颜色 */
ul>li:last-child{
color: rebeccapurple;
} /* 最后一个元素的颜色 */
ul>li:nth-child(2){
color: red;
} /* 第二个元素的颜色 */
ul>li:nth-child(5){
color: red;
} /* 第五个元素的颜色 */
</style>
</head>
<body>
<!-- 简写形式： ul>li*3 + "tab键" -->
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
<li>第五</li>
<li>第六</li>
</ul>
</body>
</html>
运行结果：
接下来，我们改变一下上面ul标签里面的内容，css不变，如下：
<ul>
<span>我是span标签也是第一个元素了！</span>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
<li>第五</li>
<li>第六</li>
</ul>
然后运行结果：
可以发现：css中第一个元素的青蓝色在这没体现出来，然后关注变成红色字可以发现，从第二变到第一，从第五变到第四了。（如果有点乱，可以直接对比两张图片）。
如果想要“第一”还是变成原来的 青蓝色 的话，那么我们需要用另外的知识点来实现，那就是上面说的:first-of-type，表示的就是某一类型中的第一个子元素，同样，还是举例说明：
html部分
<ul>
<span>我是span标签也是第一个元素了！</span>
<li>li元素的第一个元素</li>
<li>li元素的第二个元素</li>
<li>li元素的第三个元素</li>
<li>li元素的第四个元素</li>
<li>li元素的第五个元素</li>
<li>li元素的第六个元素</li>
</ul>
css部分
<style>
ul>li:first-child{
color:aqua;
} /* 第一个元素的颜色 */
ul>li:last-child{
color: rebeccapurple;
} /* 最后一个元素的颜色 */
ul>li:nth-child(5){
color: red;
} /* 第五个元素的颜色 */
ul>li:first-of-type{
color:blue;
} /* 表示li类型的第一个元素的颜色 */
</style>
运行结果：
可以发现，现在li的第一个元素变成蓝色了。
ok接下来我们再补充一下，如何使span标签和所有的li标签都变色？
只需要在css部分添加如下代码：
span,ul>li:nth-child(n){
color:goldenrod;
} /* 表示span标签和所有的li标签都变金色 */
运行结果：
okk，接下来就是最后一部分了，就是 :not 这个知识点如何用，是干嘛的？别慌，直接看代码和运行结果就知道是干嘛的了！(对比下面两张图的区别）
