CSS3中31种选择器使用方法教程

原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月，介绍了 30 种最常用的 CSS 选择器用法，多加了一种，变成了牢记 31 种选择器用法。其他 CSS3 选择器用法请查看 CSS3 selectors explained 这篇文章，此外，W3C CSS3 选择器官方文档 Selectors Level 3 W3C Recommendation 29 September 2011 记录在这里留待有疑问的时候查看。

1. 

*

* { margin: 0; padding: 0;}

星号选择器用于选取页面中的所有元素，可用于快速清除所有元素的 

margin

padding

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

兼容 IE6+

2. 

#X

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

id 选择器，最常见的选择器用法之一，不可重复使用。

兼容 IE6+

3. 

.X

.error { color: red;}

class 选择器，也是最常见的选择器用法之一，与 id 选择器不同的是 class 选择器可同时选取多个元素，而 id 选择器只能给一个独一无二的元素设定样式。

兼容 IE6+

4. 

X Y

li a { text-decoration: none;}

后代选择器 (descendant selector)，选取 X 元素内的所有 Y 元素，比如上面这段代码将选取 li 标签内的所有链接。

兼容 IE6+

5. 

X

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

标签选择器 (type selector)，用于选取 HTML 标签 (tag)。

兼容 IE6+

6. 

X:visited

X:link

a:link { color: red; }a:visted { color: purple; }

:link

:visited

兼容 IE6+

7. 

X + Y