选择器

KaaPexei

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

转载于:https://www.cnblogs.com/dhrwawa/p/10468815.html