其实，路上都是风景。
之前我们学习了一些选择器，今天我们来进行总结，选择器一共分为五大类。
01.基本选择器
1.通配符选择器
统一调配所有属性
*{
padding: 0;
margin: 0;
}
2.class选择器 必须在元素中定义class属性
[类似于人名]
.class属性值{
属性:属性值;
...
}
3.ID选择器必须在元素中定义id属性
#id值{
属性:属性值;
...
}
4.元素选择器（标签选择器）
标签名{
属性:属性值;
...
}
5.群组选择器
就是同时选择多个类名，中间用逗号隔开
02.层次选择器
1.包含选择器（后代选择器）选择的匹配的元素被包含在前一个元素内，会选择所有在此父元素里面的所有后代，包括孙元素。中间用空格连接
2.子选择器
匹配的是这个元素的孩子，用>号连接
3.相邻兄弟选择器
兄弟选择器，就是让一个元素的兄弟属性值与这个元素相同
p+a{} 表示p的相邻元素a会改变为大括号设置的属性值。
p:hover+a{}表示鼠标悬浮在P上之后他的下面一个兄弟元素会显示出来并且属性值变为设置的。
4.通用选择器
p~a{}表示p后面所有的兄弟a元素都变为大括号内设置属性值。
p:hover~a{}表示鼠标悬浮在p上之后他所有的兄弟属性都会显示且属性值为设置的。
03.伪类选择器
1.动态伪类选择器（链接伪类选择器）
1>.链接未访问时效果
语法：a:link:;
2>.链接访问后效果
语法：a:visited:;
3>.鼠标悬停时候效果
语法：a:hover:;
4>.鼠标按下时效果
语法：a:active
使用链接伪类选择器的时候顺序必须为1234
5>.获取焦点
语法：E：focus
应用在文本输入框中
2.目标伪类选择器
语法： ：target
选择匹配的所有元素
前面的元素只能是被操作的元素的选择器。
例如：#id:target{}
<a href="#id">操作的</a>
<p id="id">被安排的</p>
使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
3.UI元素状态伪类选择器
enabled 匹配所有启用的表单元素，改变样式
disabled 匹配所有禁用的表单元素，改变禁用状态下的样式
checked 匹配的是复选或者单选按钮的表单元素，点击之后的样式
4.结构伪类选择器
1>E:fisrt-child
选中子元素为E的第一个E。与E:nth-child(1)等同
2>E:last-child
作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
3>E F:nth-child(n)
选择父元素E的第n个子元素F。:nth-child(length)、:nth-child(n)、:nth-child(n*length)、:nth-child(n+length)、:nth-child(-n+length)、:nth-child(n*length+1)
这里需要注意，如果F元素中混入了一个其他的元素，这个元素也算一行，但是不会显示出样式，比如第六行插入了其他的，那么如果想要继续设置第五行元素，n的值为6.
4>F:nth-child(even)
选中所有子元素F中位于偶数行的元素
5>F:nth-child(odd)
选中所有子元素F中位于奇数行的元素
6>:nth-last-child()
选中从后往前数的第几行/奇数行/偶数行
7>E:only-child
选中父元素中只有一个E元素的E
8>:first-of-type
选择的元素是一堆同类元素的上一级的元素的第一行
9>:last-of-type
选择一个上级元素的最后一个同类子元素
10>:nth-of-type()
选择指定的元素，类似于:nth-child，不同的是他只计算选择器中指定的那个元素。不管其中有没有混入其他的元素，也只计算第n行/偶数行/奇数行
11>:nth-last-of-type()
选择指定的元素，从元素的最后一个开始计算
12>:only-of-type
选择一个元素是它的上级元素的唯一 一个相同类型的子元素,注意这里与only-child不同的是，它是唯一一个类型相同而不是唯一一个
13>:empty
选择的元素里面没有任何内容,连空格都没有才可以
14>:root
选择文档的根元素
5.否定伪类选择器
E;not(F)
匹配E元素中所有除了F以外的元素。
04.伪元素选择器
1.:after{content:''}与::after{content:''}相同
代表让这些文字或者图片跟在此元素后面显示出来
2.:before{content:''}与::before{content:''}
在此元素之前添加内容或者图片
3.:first-letter{}
定义它身后的块级元素中第一个字符的样式
4.:first-line{}
定义它后面的块级元素的第一行的样式，注意这两个都只能使用块级元素
5.:selection{}
当我选中元素里面的文字时，改变样式，只能改变字体颜色和背景颜色。
05.属性选择器
1.E[attr]
选择具有attr属性的E元素，E可以省略，代表定义了attr的任意类型元素。
2.E[attr=”value”]
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素 例如: a[href=”www.baidu.com”]{color:red;}
3.E[attr|=value]
选择匹配E元素，且E元素定义了属性 attr，attr属性值是一个具有val或者以val-开始的，属性值。常用于lang属性（例如 lang=” en-us”)。例如 p[lang=en]将匹配定义为英语的任何段落，无论是英式英语还是美式英语
4.E[attr~=val]
选择匹配E元素，且E元素定义了属性 attr，attr属性值具有多个空格分隔的值，其中一个值等于val。例如，.info[title~-=more]将匹配元素具有类名info，而且这个元素设置了一个属性 title，同时title属性值以包含了“more”的任何元素，例如<a class=” info”title=”clickhere for more information” >click me</a>
5.E[attr*=val]
选择匹配元素E，且E元素定义了属性 attr，其属性值任意位置包含了“val”。换句话说,字符串 val 在任意位置
*代表匹配任意字符
6.E[attr^=val]
选择匹配元素E，且E元素定义了属性 attr，其属性值以val开头的任何字符串
^代表匹配起始符
7.E[attr$=val]
选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任何字符串。刚好与E[attr^=val]相反
$代表匹配终止符