30个你必须熟记的CSS选择器

左手的ㄟ右手 2022-04-12 09:57 234阅读 0赞

你学会了基本的`id`，`class`类选择器和`descendant`后代选择器，然后就觉得完事了吗？如果这样，你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3，并且只能在现代的浏览器中使用，但学会这些是大有好处的。

## 1. \* ##

首先我们来认识一些简单的选择器，尤其针对初学者，然后再看其他高级的选择器。

星号可以用来定义页面的所有元素。许多开发者会使用这个技巧来把`margin`和`padding`都设为0。在快速开发测试中这种设置固然是好的，但我建议绝对不要在最终的产品代码中使用。因为会给浏览器增加大量不必要的*负荷*。

星形`*`也可以用于子元素选择器（child selectors）。

这段代码会定义`#container` `div`所有子元素的样式。跟上面一样，如果可以尽量避免使用这个方法。

##### [查看示例][Link 1] #####

### 兼容的浏览器 ###

*  IE6+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 2. \#X ##

使用＃号作为前缀可以选择该`id`的元素。这是最常见的用法，但使用`id`选择器时要谨慎。

> 问问自己：是否真的需要使用`id`来定义元素的样式？

`id`选择器比较局限，不能重用。如果可以的话，先尝试使用标签名称，HTML5的其中一个新元素，或使用伪类。

##### [查看示例][Link 2] #####

### 兼容的浏览器 ###

*  IE6+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 3. .X ##

这是`class`类选择器。`id`和`class`类选择器的区别是，类选择器可以定义多个元素。当你想定义一组元素的样式时可以使用`class`选择器。另外，可以使用`id`选择器来定义某一个特定的元素。

##### [查看示例][Link 3] #####

### 兼容的浏览器 ###

*  IE6+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 4. X Y ##

下一个最常见的选择器是`descendant`后代选择器。当你需要更精确地定位时，可以使用后代选择器。例如，假如说你只想选择无序列表里的链接，而不是所有的链接？这种情况下你就应该使用后代选择器。

> **经验分享** \- 如果你的选择器看起来像`X Y Z A B.error`这样就错了。问问自己是否真的需要加入这么多*负荷*。

##### [查看示例][Link 4] #####

### 兼容的浏览器 ###

*  IE6+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 5. X ##

假如你想定义页面里所有`type`标签类型一样的元素，而不使用`id`或者`class`呢？可以简单地使用元素选择器。比如选择所有的无序列表，可以用`ul {}`。

##### [查看示例][Link 5] #####

### 兼容的浏览器 ###

*  IE6+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 6. X:visited and X:link ##

我们使用`:link`伪类来定义所有还没点击的链接。

另外还有`:visited`伪类可以让我们给*曾经*点击过或者*访问过*的链接添加样式。

##### [查看示例][Link 6] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 7. X + Y ##

这是邻近元素选择器，*只会*选中紧接在另一个元素后的元素。这上面的示例中，只有每个`ul`后面的第一个段落是红色的。

##### [查看示例][Link 7] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 8. X > Y ##

`X Y`和`X > Y`的区别是后者只会选中直接后代。例如，看看下面的代码：

<table style="border-collapse:collapse;width:600px;border:0px;line-height:normal;vertical-align:baseline;font-family:'Source Code Pro', Monaco, monospace;font-size:14px;background:none;"> 
 <tbody style="border:0px;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;vertical-align:baseline;background:none;"> 
   <td style="border:0px;vertical-align:baseline;font-size:14px;color:#afafaf;background:none;"> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      01 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      02 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      03 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      04 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      05 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      06 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      07 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      08 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      09 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      10 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      11 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      12 
    </div> </td> 
   <td style="width:564px;border:0px;vertical-align:baseline;font-size:14px;background:none;"> 
    <div style="border:0px;vertical-align:baseline;background:none;"> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">div</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#808080;background:none;">id</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">=</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#0000FF;background:none;">"container"</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">ul</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; List Item</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">ul</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; Child &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">ul</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; List Item &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; List Item &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; List Item &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">ul</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">div</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

`#container > ul`只会定义`id`为`container`的`div`里的`ul`元素，而不会定义第一个`li`里的`ul`。

因此，使用这种选择器的效果更佳。实际上，在JavaScript中尤其适用。

##### [查看示例][Link 8] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 9. X ~ Y ##

这种兄弟选择器跟`X + Y`很像，但没有那么严格。邻近选择器（`ul + p`）只会选择*紧接*在前一个元素后的元素，但兄弟选择器更广泛。比如，在上面的例子中，只要在`ul`后的`p`兄弟元素都会被选中。

##### [查看示例][Link 9] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 10. X\[title\] ##

这种是*属性选择器*，在上面的例子中，带有`title`属性的链接标签才会被匹配。没有title属性的标签不会受到影响。但如果想更具体地根据属性的值来选择，就继续往下看吧。

##### [查看示例][Link 10] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 11. X\[href="foo"\] ##

上面的代码定义了所以指向*http://net.tutsplus.com*的链接都是nettuts品牌的绿色。其他的链接不受影响。

> 注意我们把赋值放在引号里面，在JavaScript中选择元素的时候也要记住这么使用。尽可能地使用CSS3标准的选择器。

这种方法不错，但还是有点局限。万一链接也是指向Nettuts+，但路径是*nettuts.com*而不是完整的路径呢？这种情况下我们可以使用正则表达式（regular expression）。

##### [查看示例][Link 11] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 12. X\[href\*="nettuts"\] ##

这解决了上面的问题。星号表示赋值出现在属性的*任意处*。这样就定义了指向*nettuts.com*，*net.tutsplus.com*甚至*tutsplus.com*的链接。

要记住的是这种表达比较宽泛。假如链接包含*tuts*但指向了不是Envato旗下的网站呢？如果你想更精确，可以使用`^`和`$`来匹配前缀和后缀。

##### [查看示例][Link 12] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 13. X\[href^="http"\] ##

你有想过有些网站是怎么在链接旁边加一个小图标指示这是外部链接吗？我相信你一定有见过这样的小图标，它们标示着链接会导向到另外的网站。

这非常容易做到。通常使用正则表达式来指定字符串的前缀。如果我们想定义所有`href`属性前缀为`http`的链接标签，我们可以使用上面代码的选择器。

> 可以看到我们没有使用`http://`，因为没有必要，而且这样不能匹配以`https://`开头的url。

接下来，比如说我们要定义所以指向图片的链接又要怎么办呢？这样可以匹配字符串的*后缀*。

##### [查看示例][Link 13] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 14. X\[href$=".jpg"\] ##

再来，我们使用正则表达式符号`$`来表示字符串的后缀。在上面的例子中，我们将匹配所以指向图片或至少以`.jpg`结尾的url。要记住的是当然这些样式对`gif`和`png`是无效的。

##### [查看示例][Link 14] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 15. X\[data-\*="foo"\] ##

就像上面所说的，我们怎么匹配所有的图片，包括`png`，`jpeg`，`jpg`和`gif`？可以使用多个选择器。

但这样很麻烦，也没有效率。另一种解决方法是使用自定义属性。比如在图片链接标签中添加`data-filetype`属性。

这样，我们就可以使用属性选择器来定义链接的样式。

##### [查看示例][Link 15] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 16. X\[foo~="bar"\] ##

这个技巧将会让小伙伴们对你刮目相看。并没有很多人知道这个技巧。波浪符号（`~`）可以让你定义取值带有空格的属性。

继续使用前面的自定义属性，创建`data-info`属性来匹配带有空格的取值。举个例子，这里我们匹配外部链接和图片链接。

使用上面的代码，现在我们可以用波浪号的技巧来定义包含其中一个值的元素。

巧妙吧？

##### [查看示例][Link 16] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 17. X:checked ##

很简单，这个伪类可以用来定义*选中（checked）*的元素，比如单选按钮（radio）或多选按钮（checkbox）。

##### [查看示例][Link 17] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 18. X:after ##

伪类`before`和`after`属于高级用法。几乎每一天都有人找到高效而有创意的新用法。这两个伪类可以在元素前面和后面添加内容。

许多人认识到这两个伪类是因为这是清除浮动的技巧。

<table style="border-collapse:collapse;width:600px;border:0px;line-height:normal;vertical-align:baseline;font-family:'Source Code Pro', Monaco, monospace;font-size:14px;background:none;"> 
 <tbody style="border:0px;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;vertical-align:baseline;background:none;"> 
   <td style="border:0px;vertical-align:baseline;font-size:14px;color:#afafaf;background:none;"> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      01 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      02 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      03 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      04 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      05 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      06 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      07 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      08 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      09 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      10 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      11 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      12 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      13 
    </div> </td> 
   <td style="width:564px;border:0px;vertical-align:baseline;font-size:14px;background:none;"> 
    <div style="border:0px;vertical-align:baseline;background:none;"> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">.clearfix:after { </code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">content</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#0000FF;background:none;">""</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">display</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">block</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">clear</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">both</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">visibility</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">hidden</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">font-size</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">0</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">height</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">0</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">}</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;">
       &nbsp; 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">.clearfix { </code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">*</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">display</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: inline-</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">block</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">; </code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">_height</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">1%</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这个例子利用`:after`在元素后面添加间隔和清除浮动的元素。这是你值得拥有的高级技巧，尤其是当`overflow: hidden;`不管用的时候。

还有另一种创新的用法，[查看我另一篇快速创建阴影的技巧][Link 18]。

> 根据CSS3选择器规范，语法上你应该使用双冒号来`::`来指定伪类。然而，为了兼容多数浏览器，单冒号也被承认。实际上，在目前的情况下，使用单冒号的选择是明智的。

### 兼容的浏览器 ###

*  IE8+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 19. X:hover ##

好吧，这个你一定懂。正式的叫法是用户交互伪类`user action pseudo class`。听起来有些费解，但实际上并非如此。想给用户鼠标划过的元素添加样式？这就派上用场了！

> 要记住的是在旧版的IE里，`:hover`只能用于链接标签。

最常见的用法是，比如，当鼠标划过链接，链接会出现下划线（`border-bottom`）。

> **经验分享** \- `border-bottom: 1px solid black;`比`text-decoration: underline;`的效果更好。

### 兼容的浏览器 ###

*  IE6+ （只能用于链接标签）
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 20. X:not(selector) ##

否定伪类非常有用。比如，我希望选中所有的div元素，除了一个`id`为`container`的div。上面的代码就很巧妙地做到了这一点。

或者，如果我想选中所有不是段落标签的元素，可以像下面这样，但不建议这样使用。

##### [查看示例][Link 19] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 21. X::pseudoElement ##

我们可以使用伪元素（用`::`表示）来定义某些片段元素，比如第一行或第一个字母。要记住的是这只能用于块状（block）元素。

> 伪元素使用两个冒号`::`。

#### 下面匹配段落的第一个字母： ####

上面的代码会先找到所有的段落，然后匹配元素的第一个字母。

这常用于创建类似报纸文章的样式。

#### 匹配段落的第一行 ####

类似地，这里使用`::first-line`来定义元素的第一行的样式。

> “为了兼容现有的样式标准，用户代理必须同时采纳CSS1和CSS2里使用单冒号来表示伪元素的标准（比如:first-line，:first-letter，:before和:after）。但新的伪元素不兼容这种特列。 － [资料来源][Link 20]”

##### [查看示例][Link 21] #####

### 兼容的浏览器 ###

*  IE6+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 22. X:nth-child(n) ##

还记得以前我们不可以匹配一组序列元素里的某个元素吗？`nth-child`伪元素就能解决这个问题！

要注意的是`nth-child`指序列里的第n个元素，从1数起。如果你想匹配列表里的第二个元素，可以使用`li:nth-child(2)`。

我们甚至可以使用这种方法来选择一系列的子元素。比如`li:nth-child(4n)`可以选择排在4的倍数的元素。

##### [查看示例][Link 22] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox 3.5+
 *  Chrome
 *  Safari

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

假如你有一个无序列表里面有很多子元素，但你只想匹配第三到最后一个元素，那该怎么办？你可以使用伪类`nth-last-child`。

这个技巧跟上面的一样，但是从集合的最后一个数起。

##### [查看示例][Link 23] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox 3.5+
 *  Chrome
 *  Safari
 *  Opera

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

有时候你可能想通过元素的类型`type`来选择，而不是子元素`child`。

假设有5个无序列表。如果你想定义第三个`ul`的样式，但又没有`id`来进行匹配，那么可以使用伪类`nth-of-type(n)`。在上面的代码中，只有第三个`ul`会有边框。

##### [查看示例][Link 24] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox 3.5+
 *  Chrome
 *  Safari

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

当然，我们也可以使用`nth-last-of-type`来选择倒数第n个元素。

### 兼容的浏览器 ###

*  IE9+
 *  Firefox 3.5+
 *  Chrome
 *  Safari
 *  Opera

## 26. X:first-child ##

这种伪类可以用于选中母元素的第一个子元素，常常用于去掉第一个或最后一个元素的边框。

例如，假设你有一个序列，每一行的元素都有上边框`border-top`和下边框`border-bottom`。这样的话第一个和最后一个元素看来起就没有那么整齐。

许多设计师就会通过给第一个和最后一个元素添加样式来解决，但实际上可以使用这里提到的伪类。

##### [查看示例][Link 25] #####

### 兼容的浏览器 ###

*  IE7+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 27. X:last-child ##

`last-child`是`first-child`的反面，可以匹配最后一个子元素。

### 示例 ###

下面的例子展示了怎么使用这些伪类。先创建一个无序列表。

#### 代码 ####

这是一个简单的列表。

#### CSS ####

<table style="border-collapse:collapse;width:600px;border:0px;line-height:normal;vertical-align:baseline;font-family:'Source Code Pro', Monaco, monospace;font-size:14px;background:none;"> 
 <tbody style="border:0px;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;vertical-align:baseline;background:none;"> 
   <td style="border:0px;vertical-align:baseline;font-size:14px;color:#afafaf;background:none;"> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      01 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      02 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      03 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      04 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      05 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      06 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      07 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      08 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      09 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      10 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      11 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      12 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      13 
    </div> </td> 
   <td style="width:564px;border:0px;vertical-align:baseline;font-size:14px;background:none;"> 
    <div style="border:0px;vertical-align:baseline;background:none;"> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">ul { </code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">width</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">200px</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">background</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">#292929</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">color</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">white</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">list-style</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">none</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">padding-left</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">0</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">}</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;">
       &nbsp; 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">li { </code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">padding</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">10px</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">border-bottom</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">1px</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">solid</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">black</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">border-top</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">: </code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">1px</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">solid</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;color:#009900;background:none;">#3c3c3c</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这部分代码设置背景颜色，去掉浏览器给`ul`设置的padding，然后给`li`加上边框增加深度。

![Styled List][]

> 给列表增加深度，可以给每个`li`添加比背景颜色深一点的下边框`border-bottom`。然后添加比背景颜色*浅一点*的上边框`border-top`。

唯一的问题是，上图中无序列表的顶部和底部也会有边框，看起来有点奇怪。可以用伪类`:first-child`和`:last-child`来解决。

![Fixed][]

这样就好了。

##### [查看示例][Link 25] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

*对了，IE8也支持`:first-child`，但不支持`:last-child`。*

## 28. X:only-child ##

事实上你很少会用到`only-child`这个伪类，但是当你需要的时候是可以使用的。

only-child可以让你匹配唯一的子元素。例如，在上面的代码中，只有当div只有一个p子元素的时候段落字体才是红色的。

再看下面的代码。

在这种情况下，第二个`div`里面的段落不会被选中，只有第一个`div`的段落才被选中。只要母元素含有超过一个子元素，`only-child`伪类就会失效。

##### [查看示例][Link 26] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox
 *  Chrome
 *  Safari
 *  Opera

## 29. X:only-of-type ##

这个伪类有几种不同的用法。only-of-type会匹配母元素里没有邻近兄弟元素的子元素。例如，匹配所有只有一个列表元素的`ul`。

首先想想要怎么做？你可以使用`ul li`，但这样会匹配*所有*无序列表的元素，这样`only-of-type`就是唯一的解决方法。

##### [查看示例][Link 27] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox 3.5+
 *  Chrome
 *  Safari
 *  Opera

## 30. X:first-of-type ##

`first-of-type`可以用来选择该类型的第一个元素。

#### 练习 ####

为了更好地理解，我们来做一个练习。拷贝下面的代码粘贴到你的代码编辑器里：

<table style="border-collapse:collapse;width:600px;border:0px;line-height:normal;vertical-align:baseline;font-family:'Source Code Pro', Monaco, monospace;font-size:14px;background:none;"> 
 <tbody style="border:0px;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;vertical-align:baseline;background:none;"> 
   <td style="border:0px;vertical-align:baseline;font-size:14px;color:#afafaf;background:none;"> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      01 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      02 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      03 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      04 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      05 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      06 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      07 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      08 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      09 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      10 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      11 
    </div> 
    <div style="border-width:0px 1px 0px 0px;border-right-style:solid;border-right-color:#e4e4e4;text-align:right;vertical-align:baseline;background-image:none;">
      12 
    </div> </td> 
   <td style="width:564px;border:0px;vertical-align:baseline;font-size:14px;background:none;"> 
    <div style="border:0px;vertical-align:baseline;background:none;"> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">div</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">p</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; My paragraph here. &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">p</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">ul</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; List Item 1 &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; List Item 2 &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">ul</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;">
       &nbsp; 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">ul</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; List Item 3 &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt; List Item 4 &lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">li</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&nbsp;</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">ul</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;&nbsp;&nbsp; </code> 
     </div> 
     <div style="border:0px;vertical-align:baseline;background-image:none;"> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&lt;/</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;font-weight:bold;color:#006699;background:none;">div</code> 
      <code style="font-family:'Source Code Pro', Monaco, monospace;border:0px;font-size:14px;vertical-align:baseline;background:none;">&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

停下来想一下，怎么选中*"List Item 2"*。想到答案了（或者选择放弃）才继续看下面。

#### 方案1 ####

答案有很多种，首先是使用`first-of-type`。

上面的代码中，首先找到页面中的第一个无序列表，然后找到它的直接后代，然后选择第二个元素。

#### 方案2 ####

Another option is to use the adjacent selector.

另一个选择是使用邻近选择器。

这里先找到紧跟在`p`后面的`ul`，然后找到最后的元素。

#### 方案3 ####

我们还可以尝试使用不同的组合。

这里我们先找到页面的第一个`ul`，然后找到倒数第一个元素。

##### [查看示例][Link 28] #####

### 兼容的浏览器 ###

*  IE9+
 *  Firefox 3.5+
 *  Chrome
 *  Safari
 *  Opera

## 结语 ##

如果你想兼容旧的浏览器，比如IE6，在使用这些新的选择器时需要更加注意。但是不要让旧浏览器妨碍你做新的尝试。可以[参考浏览器兼容性列表][Link 29]。另外可以使用[Dean Edward的E9.js][Dean Edward_E9.js]。

另外，当使用JavaScript类库的时候，比如jQuery，尽可能地使用原生的CSS3选择器。这样[可以加快代码的运行速度，因为选择器引擎使用浏览器内置的解析器，速度更快。][Link 30]

感谢阅读，希望你能有所收获！

[Link 1]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/star.html
[Link 2]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/id.html
[Link 3]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/class.html
[Link 4]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/descend.html
[Link 5]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/tagName.html
[Link 6]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/links.html
[Link 7]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/adjacent.html
[Link 8]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/childcombinator.html
[Link 9]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/generalcombinator.html
[Link 10]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes.html
[Link 11]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes2.html
[Link 12]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes3.html
[Link 13]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes4.html
[Link 14]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes5.html
[Link 15]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes6.html
[Link 16]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/attributes7.html
[Link 17]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/checked.html
[Link 18]: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/
[Link 19]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/not.html
[Link 20]: http://www.w3.org/TR/css3-selectors/
[Link 21]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/pseudoElements.html
[Link 22]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nth.html
[Link 23]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthLast.html
[Link 24]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/nthOfType.html
[Link 25]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstChild.html
[Styled List]: https://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/extraBorders.png
[Fixed]: https://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/fixed.png
[Link 26]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyChild.html
[Link 27]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/onlyOfType.html
[Link 28]: http://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/firstOfType.html
[Link 29]: http://www.quirksmode.org/css/contents.html
[Dean Edward_E9.js]: http://code.google.com/p/ie7-js/
[Link 30]: http://jsperf.com/jquery-css3-not-vs-not