实用全面的css选择器

首先推荐一个非常实用的css参考手册：http://www.css88.com/book/css/

css选择器详细语法：

1、 基本选择器：

选择器	类型	功能描述	例子
*	全部选择器	匹配文档中任何html元素	*
element	元素选择器	匹配指定名称的html元素	div
#id	id选择器	匹配指定id的html元素	#password
.class	类选择器	匹配指定类的html元素	.header
a, b	选择多个选择器	匹配指定的a和b元素	.header, #password

2、 层次选择器：

选择器	类型	功能描述	例子
ab	多重选择器	匹配同时符合a和b的元素	div.header
a b	后代选择器	匹配包含在a里面的所有b元素	div p
a>b	子选择器	匹配在a子元素里的所有b元素	div>p
a+b	相邻后兄弟选择器	匹配位于a后的第一个元素且为b的元素	div+p
a~b	后兄弟选择器	匹配位于a后的所有b元素	div~p

3、动态伪类选择器：

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

4、目标伪类选择器

选择器	类型	功能描述	例子
E:target	活动锚点选择器	选取当前活动的锚点	a:target

5、表单元素状态伪类选择器语法

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

6、结构伪类选择器使用语法

选择器|功能描述|例子
-|
E:first-child|匹配作为父元素的第一个子元素且元素为E。与E:nth-child(1)等同|p:first-child
E:last-child|匹配作为父元素的最后一个子元素且元素为E。与E:nth-last-child(1)等同|p:last-child
E:root|:root在html文档里就代表html元素|:root或者html:root
E:nth-child(n)|匹配作为父元素的第n个子元素且为元素E。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.|li:nth-child(2)
E:nth-last-child(n)|匹配作为父元素的倒数第n个子元素且为元素E。和E:nth-child(n)顺序相反，其他用法一样|li:nth-last-child(3)
E:nth-of-type(n)|匹配E元素，且其在父元素里恰好排为第n个E元素|p:nth-of-type(2)
E:nth-last-of-type(n)|匹配E元素，且其在父元素里恰好排为倒数第n个E元素|p:nth-last-of-type(2)
E:first-of-type(n)|匹配E元素，且其在父元素里恰好排为第1个E元素|p:first-of-type(2)
E:last-of-type(n)|匹配E元素，且其在父元素里恰好排为倒数第1个E元素|p:last-of-type(2)
E:only-child|匹配E元素，且其父元素只有E这个元素|p:only-child
E:only-of-child|匹配E元素，且其父元素只有一个E类型元素|p:only-of-child
E:empty|匹配没有任何子元素（包括text节点）的元素E|p:empty

7、否定伪类选择器

选择器|功能描述|例子
-|
E:not(s)|匹配不含有s选择符的元素E|li:not(:last-child)

8、属性选择器
选择器|功能描述|例子
|
E[att] |匹选择具有att属性的E元素|img[alt]
E[att="val"] |选择具有att属性且属性值等于val的E元素|input[type="text"]
E[att_{="val"]|选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）|div[class}="a"]
E[att^{="val"]|选择具有att属性且属性值为以val开头的字符串的E元素|div[class}="a"]
E[att$="val"]|选择具有att属性且属性值为以val结尾的字符串的E元素|div[class$="c"]
E[att="val"]|选择具有att属性且属性值为包含val的字符串的E元素|div[class="b"]
E[att|="val"]|选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择|div[class|="a"]

9、伪类选择器

E:first-letter/E::first-letter
E:first-line/E::first-line
E:after/E::after
E::placeholder
E::placeholder