作为一名前端，css选择器真的是太习以为常了，几乎每天都在写，但是，css选择器总类繁多，经常使用的也就那几个，但是很多其他的选择器在一些特定的环境下还是非常有用的，之前不了解，写了一堆js去实现，这次趁年前工作任务不紧把css选择器整理一下，这种看过就会用的东西一定要掌握。尤其是最近看了各位大牛在微博上的讨（si）论（bi），感觉打好基础还是非常重要的。

1.属性选择器

[att=val]选择器

选中元素的att属性＝val这个属性值的元素。例如：[id=content]{color:red;}只选中id为content的元素。

[att*=val]选择器

选中元素用att表示的属性并且属性值中包含val指定的字符的元素。例如页面含有元素id为”section1”，”section2”，”section3”的元素，则[id*=section]全部选中这三个元素。

[att^ =val]选择器

选中元素用att表示的属性并且属性值的开头字符为用 val指定的字符。例如：[id^ =section]选中所有id值以section开头的元素。

[att$=val]选择器

选中元素用att表示的属性并且属性值以val指定的字符结尾的元素。

2.结构性伪类选择器

root选择器

选中页面的根元素。在HTML页面中指整个“”部分。

not选择器

如果想对某个结构元素使用样式，但是想排除这个结构下面的子结构元素，使用not选择器。

empty选择器

使用empty选择器来指定当元素内容为空白时使用的样式。

target选择器

使用target选择器来对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

first-child选择器

选中该元素的父元素中的第一个子元素。例如：选中ul下的第一个li，li:first-child{color:red;}

last-child选择器

选中该元素的父元素中的最后一个子元素。

nth-child，nth－last－child选择器

对指定序号的子元素使用样式。例如：nth-child(3)选中第三个子元素；nth-last-child(3)选中倒数第三个子元素。从css3开始支持，IE8还不支持。
nth-child(odd)对第奇数个子元素使用样式；
nth-child(even)对第偶数个子元素使用样式；
n可以用表达式来表示，实现循环选择元素，例如2n＋1；
选择器在计算子元素是第奇数个还是第偶数个元素的时候，是连同所有的子元素一起计算的。

nth-of-type，nth-last-of-type选择器

使用这种选择器可以避免nth－child在计算子元素时出现的问题。例如：h2:nth-of-type(odd)不会计算与h2同级的其它元素。
不支持IE8及以下浏览器。

only-child选择器

选中其父元素中只有唯一子元素的元素。

3.状态伪类选择器

E:hover选择器

指定当鼠标指针移动到元素上面时元素所使用的样式。

E:active选择器

指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。

E:focus选择器

指定元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用。

E:enabled选择器

指定当元素处于可用状态时的样式。

E:disabled选择器

指定当元素处于不可用状态时的样式。

E:read-only选择器

指定当元素处于只读状态时的样式；
在ff浏览器中，需要加“－moz－”；
配合属性readonly一起使用。

E:read-write选择器

指定当元素处于非只读状态时的样式；
同上。

E:checked选择器

指定表单中的radio单选框或checkbox复选框处于选取状态时的样式；
在ff浏览器中，需要加“－moz－”。

E:default选择器

指定当页面打开时默认处于选取状态的单选框或复选框控件的样式；
即使用户将默认设定为选取状态的单选框或复选框改为非选取状态，使用default选择器设定的样式依然有效。

E:indeterminate选择器

用来指定当页面打开时，如果一组单选框中的任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定；
目前只Opera浏览器支持。

E::selection选择器

指定元素被选中时的状态。

4.通用兄弟选择器

E ~ F

指定位于 同一个父元素 之中的 某个元素之后 的 所有 其它某个种类的兄弟元素所使用的样式。例如：div ~ p{color:red;}