必须记住的 30 类 CSS 选择器

大概大家读知道`id`,`class`以及`descendant`选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏览器中才能生效，你完全应该把这些都记在你聪明的脑袋里面。 
1. * 

Css代码 

1. * {  
2.   margin: 0;  
3.   padding: 0;  
4. }  

在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和`padding`。当然你在练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。 
`*`也可以用来选择某元素的所有子元素。 

Css代码 

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

它会选中`#container`下的所有元素。当然，我还是不建议你去使用它，如果可能的话。 

DEMO 
兼容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X 

Css代码 

1. #container {  
2.    width: 960px;  
3.    margin: auto;  
4. }  

在选择器中使用`#`可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。 
需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？ 

DEMO 
兼容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X 

Css代码 

1. .error {  
2.   color: red;  
3. }  

这是个`class`选择器。它跟`id`选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。 
DEMO 
兼容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y 

Css代码 

1. li a {  
2.   text-decoration: none;  
3. }  

专家提示：如果你的选择器像`X Y Z A B.error`这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。 
DEMO 
兼容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X 

Css代码 

1. a { color: red; }  
2. ul { margin-left: 0; }  

DEMO 
兼容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited 和 X:link 

Css代码 

1. a:link {color:red;}  
2. a:visited {color: purple;}  

我们使用`:link`这个伪类来定位所有还没有被访问过的链接。 
另外，我们也使用`:visited`来定位所有已经被访问过的链接。 
DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X+Y 

Css代码 

1. ul + p {  
2.    color: red;  
3. }  

DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8. X>Y 

Css代码 

1. div#container > ul {  
2.   border: 1px solid black;  
3. }  

`X Y`和`X > Y`的差别就是后面这个指挥选择它的直接子元素。看下面的例子： 

Css代码 

1. <div id=“container”>  
2.    <ul>  
3.       <li> List Item  
4.         <ul>  
5.            <li> Child </li>  
6.         </ul>  
7.       </li>  
8.       <li> List Item </li>  
9.       <li> List Item </li>  
10.       <li> List Item </li>  
11.    </ul>  
12. </div>  

`#container > ul`只会选中`id`为’container’的`div`下的所有直接`ul`元素。它不会定位到如第一个`li`下的`ul`元素。 
由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在javascript中使用`css`选择器时候是强烈建议这么做的。 
DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y 

Css代码 

1. ul ~ p {  
2.   color: red;  
3. }  

兄弟节点组合选择器跟`X+Y`很相似，然后它又不是那么的严格。`ul + p`选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。 
DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[title] 

Css代码 

1. a[title] {  
2.   color: green;  
3. }  

DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href=”foo”] 

Css代码 

1. a[href=“http://strongme.cn”] {  
2.   color: #1f6053; /* nettuts green */  
3. }  

注意我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话，尽量使用标准的CSS3选择器。 

这样可以用了，但是还是有点死，如果不是这个链接，而是类似的链接，那么这时就得用正则表达式了。 
DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*=”strongme”] 

Css代码 

1. a[href*=“strongme”] {  
2.   color: #1f6053;  
3. }  

DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^=”href”] 

Css代码 

1. a[href^=“http”] {  
2.    background: url(path/to/external/icon.png) no-repeat;  
3.    padding-left: 10px;  
4. }  

注意我们没有搜索http://，那是没必要的，因为它都不包含https://。 

DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14. X[href$=”.jpg”] 

Css代码 

1. a[href$=“.jpg”] {  
2.   color: red;  
3. }  

这次我们又使用了正则表达式`$`，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以`.jpg`结尾的。但是记住这种写法是不会对`gifs`和`pngs`起作用的。 
DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15. X[data-*=”foo”] 

Css代码 

1. a[data-filetype=“image”] {  
2.    color: red;  
3. }  

在回到第8条，我们如何把所有的图片类型都选中呢`png`,`jpeg`,’jpg’,’gif’？我们可以使用多选择器。看下面： 

Css代码 

1. a[href$=“.jpg”],  
2. a[href$=“.jpeg”],  
3. a[href$=“.png”],  
4. a[href$=“.gif”] {  
5.    color: red;  
6. }  

但是这样写着很蛋疼啊，而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性`data-filetype`指定这个链接指向的图片类型。 
[html] 
Image Link </a[/html]那有了这个钩子，我们就可以去用标准的办法只去选定文件类型为`image`的锚点了。 

Css代码 

1. a[data-filetype=“image”] {  
2.    color: red;  
3. }  

DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~=”bar”] 

Css代码 

1. a[data-info~=“external”] {  
2.    color: red;  
3. }  
4.    
5. a[data-info~=“image”] {  
6.    border: 1px solid black;  
7. }  

继续使用第15条那个例子，我们可以设置一个`data-info`属性，它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。 

Css代码 

1. <a href=“path/to/image.jpg” data-info=“external image”> Click Me, Fool </a>  

Css代码 

1. /* Target data-info attr that contains the value “external” */  
2. a[data-info~=“external”] {  
3.    color: red;  
4. }  
5.    
6. /* And which contain the value “image” */  
7. a[data-info~=“image”] {  
8.   border: 1px solid black;  
9. }  

17. X:checked 

Css代码 

1. input[type=radio]:checked {  
2.    border: 1px solid black;  
3. }  

上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。 
DEMO 
兼容性 

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18. X:after 

当使用`.clear-fix`技巧时许多属性都是第一次被使用到里面的。 

Css代码 

1. .clearfix:after {  
2.     content: “”;  
3.     display: block;  
4.     clear: both;  
5.     visibility: hidden;  
6.     font-size: 0;  
7.     height: 0;  
8.   }  
9.    
10. .clearfix {   
11.    *display: inline-block;   
12.    _height: 1%;  
13. }  

还想看其他创造性的使用这个伪类，看[这里](http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/)。 

根据CSS3标准规定，可以使用两个冒号`::`。然后为了兼容性，浏览器也会接受一个双引号的写法。其实在这个情况下，用一个冒号还是比较明智的。 

兼容性 

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X::hover 

Css代码 

1. div:hover {  
2.   background: #e3e3e3;  
3. }  

不用说，大家肯定知道它。官方的说法是`user action pseudo class`.听起来有点儿迷糊，其实还好。如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。 

通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。 

Css代码 

1. a:hover {  
2.  border-bottom: 1px solid black;  
3. }  

专家提示：border-bottom:1px solid black;比text-decoration:underline;要好看很多。 
兼容性 

• Firefox
• Chrome
• Safari
• Opera

20. X:not(selector) 

Css代码 

1. p::first-line {  
2.   font-weight: bold;  
3.   font-size:1.2em;  
4. }  

定位第一个字 

Css代码 

1. p::first-letter {  
2.    float: left;  
3.    font-size: 2em;  
4.    font-weight: bold;  
5.    font-family: cursive;  
6.    padding-right: 2px;  
7. }  

上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。 

它通常在一些新闻报刊内容的重点突出会使用到。 

定位某段的第一行 

Css代码 

1. p::first-line {  
2.    font-weight: bold;  
3.    font-size: 1.2em;  
4. }  

跟`::first-line`相似，会选中段落的第一行 。 

为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如`:first-line`,`:first-letter`,`:before`,`:after`.但是这个兼容对新介绍的特性不起作用。 

DEMO 
兼容性 

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n) 

Css代码 

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

请注意`nth-child`接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是`li:nth-child(2)`. 

DEMO 
兼容性 

• IE9+
• Firefox3.5+
• Chrome
• Safari

23. X:nth-last-child(n) 

Css代码 

1. li:nth-last-child(2) {  
2.    color: red;  
3. }  

这个技巧可以很正确的代替第16个TIP，不同的就是它是从结尾处开始的，倒回去的。 
DEMO 
兼容性 

• IE9+
• Firefox3.5+
• Chrome
• Safari
• Opera

24. X:nth-of-type(n) 

Css代码 

1. ul:nth-of-type(3) {  
2.    border: 1px solid black;  
3. }  

曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。 

DEMO 
兼容性 

• IE9+
• Firefox3.5+
• Chrome
• Safari

25. X:nth-last-of-type(n) 

Css代码 

1. ul:nth-last-of-type(3) {  
2.    border: 1px solid black;  
3. }  

兼容性 

• IE9+
• Firefox3.5+
• Chrome
• Safari
• Opera

26. X:first-child 

Css代码 

1. ul li:first-child {  
2.    border-top: none;  
3. }  

DEMO 
兼容性 

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child 

Css代码 

1. ul > li:last-child {  
2.    color: green;  
3. }  

例如 
 

Css代码 

1. <ul>  
2.    <li> List Item </li>  
3.    <li> List Item </li>  
4.    <li> List Item </li>  
5. </ul>  

这里没啥内容，就是一个了 List。 

Css代码 

1. ul {  
2.  width: 200px;  
3.  background: #292929;  
4.  color: white;  
5.  list-style: none;  
6.  padding-left: 0;  
7. }  
8.    
9. li {  
10.  padding: 10px;  
11.  border-bottom: 1px solid black;  
12.  border-top: 1px solid #3c3c3c;  
13. }  

上面的代码将设置背景色，移除浏览器默认的内边距，为每个`li`设置边框以凸显一定的深度。 

 

DEMO 

兼容性 

• IE9+
• Firefox
• Chrome
• Safari
• Opera

28. X:only-child 

Css代码 

1. div p:only-child {  
2.    color: red;  
3. }  

说实话，你会发现你几乎都不会用到这个伪类。然而，它是可用的，有会需要它的。 

它允许你获取到那些只有一个子的父。就像上面那段代码，只有一个段落的`div`才被着色。 

Css代码 

1. <div><p> My paragraph here. </p></div>  
2.    
3. <div>  
4.    <p> Two paragraphs total. </p>  
5.    <p> Two paragraphs total. </p>  
6. </div>  

上面例子中，第二个`div`不会被选中。一旦第一个`div`有了多个子段落，那这个就不再起作用了。 
DEMO 
兼容性 

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type 

Css代码 

1. li:only-of-type {  
2.    font-weight: bold;  
3. }  

结构性伪类可以用的很聪明。它会定位某只有一个子的目标。设想你想获取到只有一个子的`ul`？ 

使用`ul li`会选中所有`li`。这时候就要使用`only-of-type`了。 

Css代码 

1. ul > li:only-of-type {  
2.    font-weight: bold;  
3. }  

DEMO 
兼容性 

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30. X:first-of-type `first-of-type`伪类可以选择指定的第一个兄弟。 

测试 

Css代码 

1. <div>  
2.    <p> My paragraph here. </p>  
3.    <ul>  
4.       <li> List Item 1 </li>  
5.       <li> List Item 2 </li>  
6.    </ul>  
7.    
8.    <ul>  
9.       <li> List Item 3 </li>  
10.       <li> List Item 4 </li>  
11.    </ul>     
12. </div>  

来你把List Item 2取出来，如果你已经取出来或者是放弃了，来继续。 

解决办法1 
办法很多，我们看一些比较方便的。首先是`first-of-type`。 

Css代码 

1. ul:first-of-type > li:nth-child(2) {  
2.    font-weight: bold;  
3. }  

找到第一个`ul`，然后找到直接子`li`，然后找到第二个子节点。 
解决办法2 
另一个解决办法就是邻近选择器。 
这种情况下，找到`p`下的直接`ul`，然后找到它的最后一个直接子。 

解决办法3 
我们可以随便玩耍这些选择器。来看看： 

Css代码 

1. ul:first-of-type li:nth-last-child(1) {  
2.    font-weight: bold;     
3. }  

先获取到页面上第一个`ul`，然后找到最后一个子。 
DEMO 
兼容性 

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

结论 

如果你想向旧版本浏览器妥协，比如IE6，那你用这些新的选择器的时候还是得小心点。但别别让IE6组织你去学这些新的技能。那你就对自己太残忍了。记得多查查[兼容性列表](http://www.quirksmode.org/css/contents.html)，或者使用[Dean Edward’s excellent IE9.js script ](http://code.google.com/p/ie7-js/)来让你的浏览器具有这些特性。 

第二个，使用向jQuery的时候，尽量使用原生的CSS3选择器。可能 活让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。