30个你不可不知的CSS选择器小结

一、全浏览器支持的css选择器（由于很好理解，demo省略）
1.*
*通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。

* {
margin: 0;
padding: 0;
}
也可以用*来匹配某一元素下的所有子元素：

#container * {
border: 1px solid black;
}
2.#X
#+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。



二、除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。

猛击这里进入这里查看demo

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

猛击这里进入这里查看demo

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

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

猛击这里进入这里查看demo

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

猛击这里进入这里查看demo

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

猛击这里进入这里查看demo

11.X[title=""]
a[title="明河共影"]{
color:#096;
} 属性选择器，上述代码不只匹配带有title属性，更匹配title属性等于明河共影的链接元素。[]内不只可用title属性，还可以使用其他属性。

猛击这里进入这里查看demo

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

猛击这里进入这里查看demo

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

猛击这里进入这里查看demo

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

猛击这里进入这里查看demo

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属性。

猛击这里进入这里查看demo

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。

猛击这里进入这里查看demo

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

猛击这里进入这里查看demo

留意demo中是选中单选框后改变样式。

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

三、除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%;
} 我想上面这段代码，很多朋友都非常熟悉，是清理浮动时常用的hack方法。:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影，点击这里查看。

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

在原文教程中提到一个东西很有意思，即使用border-bottom: 1px solid black; 要好于text-decoration: underline;，不妨看下下面明河制作的demo。

猛击这里进入这里查看demo

从实际的效果来看，使用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;
}
::伪类，用于给元素的片段添加样式，这如何理解呢？比如你要让一个段落的第一行的文字加粗，那么这个选择器是不二之选。

猛击这里进入这里查看demo

除此之外，你还可以给第一个字加上特殊样式，这个应用还是非常常见的

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

四、css3 结构性伪类选择器22.X:nth-child(n)
li:nth-child(3) {
color: red;
}
接下来的几个伪类选择器使用上非常类似，功能也比较接近。

:nth-child(n)，用于匹配索引值为n的子元素。索引值从1开始。

猛击这里进入这里查看demo

X:nth-child()用法实际上有三种变化，demo的用法是最简单的，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)是从最后一个开始算索引。

猛击这里进入这里查看demo

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)

猛击这里进入这里查看demo

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就可以支持了，这个伪类还是非常有用的。

猛击这里进入这里查看demo

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

猛击这里进入这里查看demo

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

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

猛击这里进入这里查看demo

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)，匹配集合元素中的第一个元素。

五、明河结语
明河翻译这边文章费了不下6个时间，花了很多的心血下去，自己的确受益匪浅，希望这边文章对各位有些用处，如果你有任何疑问，都可以给明河留言。
打包下载地址：css-selectors.rar