原文 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 記錄在這里留待有疑問的時候查看。

* {  margin: 0;  padding: 0;}

星號選擇器用于選取頁面中的所有元素，可用于快速清除所有元素的 margin 與 padding，但最好只在測試的時候使用，而不要正式用在 CSS 文件中，否則會大大加重瀏覽器負擔。此外，星號選擇器也可以給父層的所有子元素設定樣式，重復一遍，盡量少用這種方式：

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

兼容 IE6+

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

id 選擇器，最常見的選擇器用法之一，不可重復使用。

兼容 IE6+

.error {  color: red;}

class 選擇器，也是最常見的選擇器用法之一，與 id 選擇器不同的是 class 選擇器可同時選取多個元素，而 id 選擇器只能給一個獨一無二的元素設定樣式。

兼容 IE6+

li a {  text-decoration: none;}

后代選擇器 (descendant selector)，選取 X 元素內的所有 Y 元素，比如上面這段代碼將選取 li 標簽內的所有鏈接。

兼容 IE6+

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

標簽選擇器 (type selector)，用于選取 HTML 標簽 (tag)。

兼容 IE6+

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

:link 偽類選擇器 (pseudo class selector) 用于選取所有未點擊過的鏈接，而 :visited 則用于選取所有已訪問過的鏈接。

兼容 IE6+

ul + p {  color: red;}

臨近選擇器 (adjacent selector)，選取緊鄰在 X 元素后面出現的第一個元素，比如上面這段代碼將選取 ul 元素后出現的第一個元素，也就是 p 元素。

兼容性 IE6+

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

在第 4 條中，后代選擇器 X Y