————转自W3Cschool，并经过我自己整理而成————
首先讲一件很重要的事情，在CSS选择器进行元素定位的时候，
机器的阅读顺序，是从右往左的，而非人的阅读顺序。
例如 body #main .content div a:hover {}
上面的选择中，机器是先查找有:hover的元素，然后在一种找到a:hover，随后向a:hover的父级找，筛选出父级是div的，然后再向上级找到class为content的，再找ID为main的，最后确认是在body标签中的。才完成整个定位。
1、 *
通用选择器，会里遍所有的标签，选择所有的子元素。性能很差，不建议使用。
兼容性：IE6+ / Firefox / Chrome / Safari / Opera
2、 #X
id 选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。
兼容性：IE6+ / Firefox / Chrome / Safari / Opera
3、 .X
这是个class选择器。它可以同时定位多个元素。去设置同一类型的元素样式。
兼容性：IE6+ / Firefox / Chrome / Safari / Opera
4、 X Y
后代选择器，即选择X的后代Y。层级应该尽量得少，减少查找负担。
兼容性：IE6+ / Firefox / Chrome / Safari / Opera
5、X
定位页面上所有的某标签，直接使用类型选择器。
兼容性：IE6+ / Firefox / Chrome / Safari / Opera
6、X:visited and X:link
伪类选择器。IE6不支持伪类选择器。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
7、X > Y
子元素选择器，只会选中X的子元素Y，不会继续深入层级（孙元素）。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
8、X + Y
相邻选择器，能选择 X 的下一个兄弟元素 Y（具有相同父级），且只是一个。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
9、X ~ Y
兄弟节点组合选择器。与上面相似，但是不仅是一个，而是全部。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
10、X [ title ]
属性选择器，只会选择有title属性的X。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
11、X [ href = "http://strongme.cn" ]
选择href属性为http://strongme.cn的标签。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
12、X [ href = "strongme" ]
这样，就指定了strongme这个值必须出现在锚点标签的href属性中，不管是strongme.cn还是strongme.com还是www.strongme.cn都可以被选中。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
13、X [ href ^ = 'http']
查找href属性中的值，是 http 开头的标签。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
14、X [ href $ = '.jpg']
查找href属性中的值，是 .jpg 结尾的标签。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
15、X [ data - * = " *** "]
选择某种文件类型的标签。比如 a [ data - filetype = " image " ]
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
16、X [ data - info ~ = " external " ]
这个~符号可以定位那些某属性值是空格分隔多值的标签。太复杂了，没时间解释了。
兼容性：IE7+ / Firefox / Chrome / Safari / Opera
17、X：checked
上面这个伪类写法可以定位那些被选中的单选框和多选框。IE9才开始兼容。
兼容性：IE9+ / Firefox / Chrome / Safari / Opera
18、X：before / after
它们会在被选中的标签周围生成一些内容。
兼容性：IE8+ / Firefox / Chrome / Safari / Opera
19、X：hover
鼠标悬停是选择。IE6只会对加在a上面的hover起作用。
兼容性：IE6+ / Firefox / Chrome / Safari / Opera
20、X：not （selector）
取反伪类。即取X中除了selector的标签。
兼容性：IE9+ / Firefox / Chrome / Safari / Opera
21、X::pseudoElement（first-line、first-letter等）
选中元素的第一行或第一个单词，必须是块级元素，为了兼容也可以用单冒号。
兼容性：IE6+ / Firefox / Chrome / Safari / Opera
22、X：nth - child（n）
回想起最前面的机器解析顺序，对这个选择器的理解顺序是，首先为父元素的第n个子元素，其次才是匹配X，若不是X会出现匹配不到。
兼容性：IE9+ / Firefox3.5+ / Chrome / Safari / Opera
23、X：nth - last - child（n）
理解和上面一直，变成从父元素的最后一个子元素开始数。
兼容性：IE9+ / Firefox3.5+ / Chrome / Safari / Opera
24、X：nth - of - type（n）
与上面两种不一样，它具体到元素，即父元素下，X的第 n 个。
兼容性：IE9+ / Firefox3.5+ / Chrome / Safari / Opera
25、X：nth - last - of - type（n）
以此类推。
兼容性：IE9+ / Firefox3.5+ / Chrome / Safari / Opera
26、X：first - child
27、X：last - child
这里的理解和逻辑与22、23相同，相当于它们的 n 取1。
兼容性：IE9+ / Firefox / Chrome / Safari / Opera
28、X：only - child
它允许你获取到那些只有一个子标签的父标签。记住机器解析顺序。
兼容性：IE9+ / Firefox / Chrome / Safari / Opera
29、X：only - of - type
这是24和28的结合。
兼容性：IE9+ / Firefox / Chrome / Safari / Opera
30、X：first - of - type
参照24
兼容性：IE9+ / Firefox3.5+ / Chrome / Safari / Opera
Wait me back