细数 30 个不可不知的 CSS 选择器

Question

尽管从事 Web 开发多年，CSS 的使用自认为已经很熟练了，但是就针对 CSS 选择器来说，我们使用的仅仅是一少部分，还有很多 CSS 选择器我们从未接触过，可能是因为兼容性的原因，亦或是还不知道，很少有人会使用这些生僻的写法，这篇文章就给大家细数 30 个不可不知的 CSS 选择器。

五大基本选择符

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（样式重置）。

除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浏览器基本上都支持。

除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居然支持！这足以让人惊喜的…..

CSS3 结构性伪类选择器

22.X:nth-child(n)

li:nth-child(3) {color: red;}

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

X:nth- child()用法实际上有三种变化。X: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的效果是惊人的相似。

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