CSS选择器

简述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的点击后的效果