[repo]30个你不可不知的CSS选择器

1、五大基本选择符

1. （通配符） 通配符选择器，常常用于css reset（样式重置），清理标签的默认样式，但如今通常不提倡直接使用了，主要是会匹配全部标签，至关耗资源。*在css的优先级中是最低的。

• {margin: 0; padding: 0;} 也能够用*来匹配某一元素下的全部子元素：

#container * {border: 1px solid black;}

2. #X（ID） #+id名，这是平常经常使用的css选择器，用于匹配id为XXX的元素，id选择器的优点是精准，高优先级（优先级基数为100，远高于class的10），做为javascript脚本钩子的不二选择，一样缺点也很明显：优先级太高，重用性差，因此在使用id选择器前，咱们最好问下本身，真的到了非用id选择器的地步？

#container { width: 960px; margin: auto;}

3. .X（类） .+class名，标准的样式选择器，与id选择器的区别是样式选择器能够选择多个元素。样式选择器是提倡使用的选择器，也是平常前端人员用到最多的选择器了。

.error {color: red;}

4. X Y（后代） li a {text-decoration: none;} 目前很是经常使用的css选择器，用于选取X元素下子元素Y，这里有个要留意的点是，这种方式的选择器将选取其下全部匹配的子元素，无视层级，因此有的状况是不宜使用的，好比上述的代码去掉li下的全部a的下划线，但li里面还有个ul，我不但愿ul下的li的a去掉下划线。

使用此子孙选择器的时候要考虑是否但愿某样式对全部子孙元素都起做用。

这种子孙选择器还有个做用，就是建立相似命名空间的做用。好比上述代码样式的做用域明显为li。

5. X（标签） a { color: red; } ul { margin-left: 0; } 标签选择器，优先级仅仅比*高，经常使用于css reset（样式重置）。

2、除IE6外浏览器支持的css选择器

6. X:link X:visited X:hover X:active a:link { color: red; } a:visted { color: purple; } 伪类选择器，visted已被访问过的样式，hover鼠标通过的样式，link未被访问的样式。三种伪类选择器经常使用于连接，但不是说只适用于连接，惋惜的是IE6只支持将这三种伪类选择器做用于连接。

这里说明一点，因为CSS优先级的关系(后面比前面的优先级高)，这几个伪类的书写顺序，通常是link、visted、hover、active。

7. X + Y（相邻） ul + p { color: red;} 相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配一个元素)

8. X > Y（子） 子选择器，留意X > Y与X Y的区别，前者是子孙选择器，即无视层级，而X Y是字选择器，只匹配X下的子元素Y。

从理论上来说X > Y是值得提倡选择器，惋惜IE6不支持。

9. X ~ Y ul ~ p {color: red;} 相邻选择器，与X+Y相似，不一样的是X ~ Y匹配的是元素集合，如上述代码，匹配的是全部ul相邻的p

10. X[title] a[title] { color: green;} 属性选择器，如上述代码匹配的是带有title属性的连接元素。

11. X[title=""] a[title="maomao"] {color:#096;} 属性选择器，上述代码不仅匹配带有title属性，更匹配title属性等于maomao的连接元素。[]内不仅可用title属性，还可使用其余属性。

12. X[title*=""] a[title*="mao"] {color:#096;} 加了*号，意味着是模糊匹配，如上述代码，会匹配title属性为mao或maomao或maomao520等带有maomao的连接属性。

13. X[title^=""] a[title^="maomao"]{color:#096;} 模糊匹配,与*的做用相反，^起到排除的做用，好比上述代码，会匹配title属性不带有maomao的连接属性。

14. X[href$=""] a[href$=".png"] { color: red;} 在属性选择器中多一个$符号，用于匹配结尾为特定字符串的元素，好比上述代码匹配的就是href属性值的结尾为.png的连接。

15.X[data-*=""] a[data-filetype="image"] {color: red;} data-filetype这个属性目前用的实在很少，但有些场合很是好用。好比我要匹配全部的数据类型为图片的连接，若是使用X[href$=""]的方式以下：

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {color: red;}

而使用data-filetype，只要： a[data-filetype="image"] {color: red;} 固然前提是你给每个连接加上data-filetype属性。

16.X[foo~=""] a[data-info~="external"] {color: red;} a[data-info~="image"] {border: 1px solid black;} 这也是很是少用的选择器，加上~号，有一种状况特别适用，好比你有个data-filetype=”external image”属性，这时候我但愿分别针对external和image样式控制。

a[data-info~="external"] {color: red;} a[data-info~="image"] {border: 1px solid black;} 上述代码会匹配data-filetype=”external”、data-filetype=”image”、data-filetype=”external image”的a。

17.X:checked input[type=radio]:checked {border: 1px solid black;} 这个伪类选择器只用于匹配带有checked属性的元素，好比radio、checkbox即单选框和多选框。

目前这个伪类选择器，IE9下都不支持，非IE浏览器基本上都支持。

3、除IE8如下的浏览器支持的css选择器

18.X:after .clearfix:after {content: "";display: block;clear: both; visibility: hidden;font-size: 0; height: 0;}

.clearfix {*display: inline-block;_height: 1%;0} 我想上面这段代码，不少朋友都很是熟悉，是清理浮动时经常使用的hack方法。:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影。

19.X:hover div:hover {background: #e3e3e3;} hover在前面已经介绍过，IE6下只支持a的hover。

这里提到一个颇有意思的东西，即便用border-bottom: 1px solid black; 要好于text-decoration: underline；从实际的效果来看，使用border-bottom的距离比text-decoration来的合理，但使用border-bottom存在一些风险，好比颜色问题。

20.X:not(selector) div:not(#container) {color: blue;} 否认伪类选择器，这仍是比较好理解的，上述将会把非id为container的div的字体颜色设置为蓝色。

:not伪类IE8并不支持，IE9已经支持了。

21.X::pseudoElement p::first-line {font-weight: bold; font-size: 1.2em;} ::伪类，用于给元素的片断添加样式，这如何理解呢？好比你要让一个段落的第一行的文字加粗，那么这个选择器是不二之选。

除此以外，你还能够给第一个字加上特殊样式，这个应用仍是很是常见的

p::first-letter { float: left;font-size: 2em;font-weight: bold;font-family: cursive; padding-right: 2px;} IE6竟然支持！这足以让人惊喜的…..

4、css3 结构性伪类选择器

22.X:nth-child(n) li:nth-child(3) {color: red;} :nth-child(n)，用于匹配索引值为n的子元素。索引值从1开始。

X:nth-child()用法实际上有三种变化。X:nth-child()更强大的用处在于奇偶匹配。有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》

23.X:nth-last-child(n) li:nth-last-child(2) {color: red;} :nth-child(n)，是从第一个开始算索引，而X:nth-last-child(n)是从最后一个开始算索引。

24.X:nth-of-type(n) ul:nth-of-type(3) {border: 1px solid black;} nth-of-type与nth-child的效果是惊人的类似，想要更多的了解nth-of-type请看《Alternative for :nth-of-type() and :nth-child()》，《:nth-of-type(N)》。

25.X:nth-last-of-type(n) ul:nth-last-of-type(3) {border: 1px solid black;} :nth-last-child效果类似。

26.X:first-child ul li:first-child {border-top: none;} 匹配子集的第一个元素。IE7就能够支持了，这个伪类仍是很是有用的。

27.X:last-child ul > li:last-child {color: green;} 与:first-child效果相反

留意IE8支持:first-child,但不支持:last-child。

28.X:only-child div p:only-child {color: red;} 这个伪类通常用的比较少，好比上述代码匹配的是div下的有且仅有一个的p，也就是说，若是div内有多个p，将不匹配。

29.X:only-of-type li:only-of-type { font-weight: bold;} 与:only-child相似。

30.X:first-of-type ul:first-of-type{font-weight: bold;} 等价于:nth-of-type(1)，匹配集合元素中的第一个元素。