简述CSS选择器类型
一、基本选择器
1、* 通用选择器,可以匹配任何元素
2、div 标签选择器,用于选择所有的div标签
3、.content 类选择器,用于选择所有class为content的元素
4、#main ID选择器,用于选择ID为main的元素
二、多元素组合选择器
1、div,p 用逗号连接,多元素选择器,用于匹配所有的div或者p元素
2、div p 用空格连接,后代选择器,用于匹配所有属于div元素的后代的p元素
3、div > p 用大于号连接,子元素选择器,用于匹配所有div的子元素p
4、div + p 用加号连接,毗邻选择器,用于匹配所有紧邻div元素的同级p元素
三、属性选择器
1、div[att] 匹配所有具有att属性的div元素
2、div[att=val] 匹配所有att等于val的div元素
3、div[att~=val] 匹配所有att属性具有多个以空格分割的值,其中含有一个等于val的div元素
4、div[att|=val] 匹配所有att属性具有多个以连字符分割的值,其中一个以val开头的div元素,主要适用于lang属性
四、伪类选择器
1、div:first-child 匹配父元素的第一个子元素
2、div:link 匹配所有未被点击的div链接
3、div:visited 匹配所有已经被点击的div链接
4、div:active 匹配鼠标已经点击但是并未释放的div链接
5、div:hover 匹配鼠标悬停的div链接
6、div:focus 匹配获得焦点的div元素
7、div:lang(c) 匹配lang属性等于c的元素
五、伪元素选择器
1、div:first-line 匹配div元素的第一行
2、div:first-letter 匹配div元素的第一个字母
3、div:before 在div之前插入生成的内容
4、div:after 在div之后插入生成的内容
六、CSS3的同级元素通用选择器
1、div~p 匹配任何在div元素之后的同级p元素
七、CSS3属性选择器
1、div[att^='alt'] 属性att的值以alt开头的元素
2、div[att$='alt'] 属性att的值以alt结尾的元素
3、div[att*='alt'] 属性att的值包含alt字符串的元素
八、CSS3中与用户界面有关的伪类
1、div:enabled 匹配表单中激活的元素
2、div:disabled 匹配表单中禁用的元素
3、div:checked 匹配表单中被选中的单选框或者复选框元素
4、div:selection 匹配用户当前选中的元素
九、CSS3中的结构性伪类
1、div:root 匹配文档的根元素,对于html文档就是html元素
2、div:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
3、div:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
4、div:nth-of-type(n) 同2,但是仅匹配相同标签的元素
5、div:nth-last-of-type(n) 同3,但是仅匹配相同标签的元素
6、div:last-child 仅匹配父元素的最后一个子元素
7、div:first-of-type 仅匹配父元素下使用同种标签的第一个子元素
8、div:last-of-type 仅匹配父元素下使用同种标签的最后一个子元素
9、div:only-child 匹配父元素下仅有的一个子元素
10、div:only-of-type 匹配父元素下仅有的一个相同标签的子元素
11、div:empty 匹配一个不包含任何子元素的元素
十、CSS3的反选伪类
1、div:not(s) 匹配不符合当前选择器的任何元素
十一、CSS3中的target伪类
1、div:target 匹配文档中特定ID的点击后的效果