一、基本选择器分为通配符选择器、标签选择器、类选择器、id选择器
1、通配符选择器
*{}
就是一个星号，可以选中页面中的所有元素，但是其优先级是最低的
2、标签选择器
div{} span{}
其实就是写标签名，就可以选择到对应的元素，优先级仅高于通配符选择器
3、类选择器
.nav{} .name{}
其实就是英文的小圆点+标签中的class属性值，优先级仅次与id选择器
4、id选择器
#nac{} #bar{}
其实就是#+标签中的id的属性值，其优先级是最高的
二、伪类选择器
1、a标签伪类选择器
a:link 超链接没有访问时的显示样式
a:hover 鼠标移到超链接上时的显示样式
a:active 鼠标按下时的显示样式
a:visited访问后的超链接访问样式
2、结构伪类选择器
li:first-child 第一个孩子是li的元素的元素的li
li:last-child 最后一个孩子是li的元素的li
li:nth-child(n) 第n个孩子是li的元素的li
li:nth-child(odd) 奇数行li:nth-child(2n)
li:nth-child(even)偶数行li:nth-child(2n-1)
3、目标伪类选择器
：target{}这里指的是用鼠标选中的元素
三、复合选择器
1、交集选择器
div.red{}即是div又是class为red的元素；中间没有任何空格
2、并集选择器
p,span,.red{}这其实可以认为是三个选择器的叠加写法
3、后代选择器
div .red{}这是父元素是div子元素的class是red的元素；中间用的是空格隔开；可以隔代
4、子元素选择器
div>ul>li{}这个指的是爷爷是div爸爸是ul自己是li的元素的样式设置
四、css3新增的属性选择器
1、a[title]{}指带有title属性的a标签
2、input[type=text]{}属于文本框的input标签
3、div[class ^= font]以font开头的class属性的div标签
4、div[class $= footer]以footer结尾的class属性的div标签
5、div[class *= tb]包含tb的class属性的div标签
五、伪元素选择器---自身元素
1、p::first-letter{}只的是p标签中的第一个字母
2、p::first-line{}指的是p标签的第一行
3、p::selection{}指的是p标签的选中的部分
六、伪元素选择器---非自身元素
1、div::before{}在div内部的前面添加一个元素
2、div::after{}在div内部的后边添加一个元素