浅谈css选择器

一、css选择器分类

二、选择器语法

1、基本选择器语法

选择器	类型	功能描述
*	通配选择器	选择文档中的所有HTML元素,如：*{margin:0}
E	元素选择器	选择指定类型的HTML元素，如：p{font-size:16px}
id	ID选择器	选择指定ID属性值为’id’的任意类型元素,如: #myDiv:{width:200px}
.class	类选择器	选择指定class属性值为’class’的任意类型的任意多个元素,如：.red{color:red}
selector1,selectorN	群组选择器	将每一个选择器匹配的元素集合,如:p，div{color:red}

2、层次选择器

选择器	类型	功能描述
E F	后代选择器	该选择器定位元素E的后代中所有元素F，如: ul li{color:red}
E>F	子选择器	该选择器定位元素E的直接子元素中的所有元素F
E+F	相邻兄弟选择器	该选择器定位与元素E有相同父元素且紧邻元素E的元素F
E~F	一般兄弟选择器	该选择器定位与元素E有相同父元素且位于E之后的所有元素F

3、动态伪类选择器

选择器	类型	功能描述
E:link	链接伪类选择器	该选择器匹配元素E被定义了超链接并未被访问过。常用于链接描点上
E:visited	链接伪类选择器	该选择器匹配元素E被定义了超链接并已被访问过。常用于链接描点上
E:active	用户行为选择器	该选择器匹配元素E被被激活。常用于链接描点和按钮上
E:hover	用户行为选择器	该选择器匹配元素E且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus	用户行为选择器	该选择器匹配元素E且而且匹配元素获取焦点

注：a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后


4、目标伪类选择器

选择器	功能描述
E:target	该选择器匹配相关URL指向的E元素

5、UI元素状态伪类选择器

选择器	类型	功能描述
E:checked	选中状态伪类选择器	匹配选中的复选按钮或者单选按钮表单元素
E:enabled	启用状态伪类选择器	匹配所有启用的表单元素
E:disabled	不可用状态伪类选择器	匹配所有禁用的表单元素

6、结构伪类选择器

选择器	功能描述
E:fisrt-child	父元素的第一个子元素E，与:nth-child(1)相同；
E:last-child	父元素的倒数第一个子元素E
E:root	根元素，始终指html元素；
E F:nth-child(n)	该选择器定位元素E的第n个子元素的元素F：
E F:nth-last-child(n)	该选择器定位元素E的倒数第n个子元素的元素F；
E:nth-of-type(n)	该选择器定位元素E的第n个指定类型子元素；
E:nth-last-of-type(n)	该选择器定位元素E的导数第n个指定类型子元素：
E:first-of-type	与:nth-of-type(1)相同；
E:last-of-tye	与:nth-last-of-type(1)相同；
E:only-child	父元素中唯一的子元素E
E:only-of-type	父元素中唯一具有该类型的元素E；
E:empty	没有子元素的元素，没有子元素包括文本节点；

注：:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项


7、否定伪类选择器

选择器	功能描述
E:not(F)	匹配所有除元素F外的E元素

8、属性选择器

选择器	功能描述
E[attr]	该选择器定位具有属性attr的任何元素E;
E[attr=value]	该选择器定位具有属性attr且属性值为value的任何元素E;
E[attr	=value]
E[attr^=value]	该选择器定位具有属性attr且属性值以value开头的任何元素E;
E[attr*=value]	该选择器与E[attr~=value]相似，但更进一步，定位具有属性attr且属性值任意位置包含val的元素E，value可以是一个完整的单词，也可以是一个单词中的一部分;
E[attr$=value]	该选择器与E[attr^=value]正好相反，定位具有属性attr且属性值以value结尾的任何元素E;
E[attr~=value]	该选择器定位具有属性attr且属性值为完整单词 value 的任何元素E;

9、伪元素

选择器	功能描述
:first-line	匹配文本首行;
:first-letter	匹配文本首字母;
:before 与:after	使用 contnet 属性生成额外的内容并插入在标记中;
:selection	匹配突出显示的文本;