关于css选择器，我想大家都有使用过，不陌生把，可以说选择器是CSS的核心，选择器主要是用来确定html的树形结构中的DOM元素节点，从而控制相应的元素应用样式。那么选择器从最初的元素选择器、类选择器(class),id选择器，伪元素、伪类，再发展到CSS3中更丰富的伪类选择器等等，这些能让定位页面上的任意元素开始变得愈发的简单，方便了。
那么关于选择器的分类，我想可以把CSS选择器分成三大类，第一类是我们常用的那些部分，叫做基本选择器；第二类称作是属性选择器，第三类我把他称作伪类选择器。
以下是我列举的一个选择器列表图 其中”CSS版本” 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。） 浏览器支持这项，写的不全面或者错误之处欢迎大家指导纠正
| 选择器类型 | 例子 | 含义描述 | CSS版本 | 浏览器支持 |
|---|---|---|---|---|
| .class | .tab{color:#f00} | 选择 class=”tab” 的所有元素。 | 1 | 所有浏览器都支持 |
| #id | #name{color:#f00} | 选择 id=”name” 的所有元素。 | 1 | 所有浏览器都支持 |
| * | *{color:#f00} | 通配符选择器，选择所有元素 | 2 | 所有浏览器都支持 |
| element | p{color:#f00} | 标签选择器，选择所有<p>标签的元素。 | 1 | 所有浏览器都支持 |
| element,element | div,p{color:#f00} | 多元素集群选择器，选择所有<div>元素和所有<p>元素。div和p之间用,分隔 | 1 | 所有浏览器都支持 |
| element element | div p{color:#f00} | 后代元素选择器，选择 <div> 元素内部的所有后代 <p> 元素，div和p之间用空格分隔 | 1 | 所有浏览器都支持 |
| element>element | ul>li{color:#f00} | 子元素选择器，选择父元素为 <ul> 下的 <li>子元素。第一级的li子元素，不包含二级嵌套的 | 2 | ie6不支持 |
| element+element | span+a{color:#f00} | 毗邻元素选择器，选择紧随在 <span> 元素之后的所有同级元素 <a>。span和a具有相同的父元素 | 2 | ie6不支持 |
| E[attribute] | a[title]{color:#f00} | 选择具有 title 属性的所有元素a。 | 2 | ie6不支持 |
| E[attribute=value] | div[class=yuan]{color:#f00} | 选择所有class属性值等于”yuan”的div元素,需要完全匹配 | 2 | ie6不支持 |
| E[attribute~=value] | div[class~=icon]{color:#f00} | 选择 class 属性包含单词 “icon” 的所有div元素。 | 2 | ie6不支持 |
| E[attribute|=value] | div[class|=ad]{color:#f00} | 选择 class属性值以 “ad” 开头的所有div元素。 | 2 | ie6不支持 |
| :link | a:link{color:#f00} | 选择所有未被访问的链接。 | 1 | 所有浏览器都支持 |
| :visited | a:visited{color:#f00} | 选择所有已被访问的链接。 | 1 | 所有浏览器都支持 |
| :hover | a:hover{color:#f00} | 选择鼠标指针位于其上的链接。 | 1 | 所有浏览器都支持 |
| :active | a:active{color:#f00} | 选择被激活时的状态。 | 1 | 所有浏览器都支持 |
| :focus | input:focus{color:#f00} | 选择获得焦点的 input 元素。 | 2 | ie6,7不支持 |
| :first-letter | p:first-letter{color:#f00} | 选择每个 <p> 元素的首字母。 | 1 | ie6不支持 |
| :first-line | p:first-line{color:#f00} | 选择每个 <p> 元素的首行。 | 1 | ie6不支持 |
| :before | p:before{color:#f00} | 在每个 <p> 元素的内容之前插入内容。 | 2 | ie6不支持 |
| :after | p:after{color:#f00} | 在每个 <p> 元素的内容之后插入内容。 | 2 | ie6不支持 |
| :lang(language) | p:lang(it){color:#f00} | 选择带有以 “it” 开头的 lang 属性值的每个 <p> 元素。 | 2 | ie6不支持 |
| element1~element2 | div~p{color:#f00} | 通用兄弟元素选择器,选择匹配<div>元素之后的<p>元素。 | 3 | ie6不支持 |
| [attribute^=value] | a[src^=”https”]{color:#f00} | 选择其 src 属性值以 “https” 开头的每个 <a> 元素。 | 3 | ie6不支持 |
| [attribute$=value] | a[class$=”val”]{color:#f00} | 选择其 class 属性以 “val” 结尾的所有 <a> 元素。 | 3 | ie6不支持 |
| [attribute*=value] | a[class*=”abc”] | 选择其 class 属性中包含有 “abc” 的每个 <a> 元素。 | 3 | ie6不支持 |
| :first-child | ul li:first-child{color:#f00} | 选择父元素为<ul>的第一个子元素<li>。 | 2 | ie6不支持 |
| :first-of-type | a:first-of-type | 选择属于其父元素下的第一个同类<a>子元素。等同于a:nth-of-type(1) | 3 | ie6,7,8不支持 |
| :last-of-type | a:last-of-type | 选择属于其父元素的最后 <a> 元素的每个 <a> 元素。 | 3 | ie6,7,8不支持 |
| :only-of-type | a:only-of-type | 选择属于其父元素唯一的 <a> 元素的每个 <a> 元素。 | 3 | ie6,7,8不支持 |
| :only-child | a:only-child | 选择属于其父元素的唯一子元素的每个 <a> 元素。 | 3 | ie6,7,8不支持 |
| :nth-child(n) | a:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <a> 元素。 | 3 | ie6,7,8不支持 |
| :nth-last-child(n) | a:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 | ie6,7,8不支持 |
| :nth-of-type(n) | a:nth-of-type(2) | 选择属于其父元素第二个 <a> 元素的每个 <a> 元素。 | 3 | ie6,7,8不支持 |
| :nth-last-of-type(n) | a:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 | ie6,7,8不支持 |
| :last-child | a:last-child | 选择属于其父元素最后一个子元素每个 <a> 元素。 | 3 | ie6,7,8不支持 |
| :root | :root | 选择文档的根元素。 | 3 | ie6,7,8不支持 |
| :empty | a:empty | 选择没有子元素的每个 <a> 元素（包括文本节点）。 | 3 | ie6,7,8不支持 |
| :target | #news:target | 选择当前活动的 #news 元素。 | 3 | ie6,7,8不支持 |
| :enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 | ie6,7,8不支持 |
| :disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 | ie6,7,8不支持 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 | 3 | ie6,7,8不支持 |
| :not(selector) | :not(a) | 选择非 <a> 元素的每个元素。 | 3 | ie6,7,8不支持 |
| ::selection | ::selection | 选择被用户选取的元素部分。 | 3 | ie6,7,8不支持 |
