选择器

一、基本选择器分为通配符选择器、标签选择器、类选择器、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内部的后边添加一个元素