实用全面的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
