一、五大基本選擇符

1. *（通配符）
*通配符選擇器，經(jīng)常用于css reset（樣式重置），清理標(biāo)簽的默認(rèn)樣式，但現(xiàn)在一般不提倡直接使用*了，主要是*會匹配所有標(biāo)簽，相當(dāng)耗資源。*在css的優(yōu)先級中是最低的。

* {margin: 0; padding: 0;} 也可以用*來匹配某一元素下的所有子元素：

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

2. #X（ID）
#+id名，這是日常常用的css選擇器，用于匹配id為XXX的元素，id選擇器的優(yōu)勢是精準(zhǔn)，高優(yōu)先級（優(yōu)先級基數(shù)為100，遠(yuǎn)高于class的10），作為javascript腳本鉤子的不二選擇，同樣缺點(diǎn)也很明顯：優(yōu)先級過高，重用性差，所以在使用id選擇器前，我們最好問下自己，真的到了非用id選擇器的地步？

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

3. .X（類）
.+class名，標(biāo)準(zhǔn)的樣式選擇器，與id選擇器的區(qū)別是樣式選擇器可以選擇多個元素。樣式選擇器是提倡使用的選擇器，也是日常前端人員用到最多的選擇器了。

.error {color: red;}

4. X Y（后代）
li a {text-decoration: none;}
目前非常常用的css選擇器，用于選取X元素下子元素Y，這里有個要留意的點(diǎn)是，這種方式的選擇器將選取其下所有匹配的子元素，無視層級，所以有的情況是不宜使用的，比如上述的代碼去掉li下的所有a的下劃線，但li里面還有個ul，我不希望ul下的li的a去掉下劃線。

使用此子孫選擇器的時候要考慮是否希望某樣式對所有子孫元素都起作用。

這種子孫選擇器還有個作用，就是創(chuàng)建類似命名空間的作用。比如上述代碼樣式的作用域明顯為li。

5. X（標(biāo)簽）
a { color: red; }
ul { margin-left: 0; }
標(biāo)簽選擇器，優(yōu)先級僅僅比*高，常用于css reset（樣式重置）。

二、除IE6外瀏覽器支持的css選擇器

6. X:link X:visited X:hover X:active
a:link { color: red; }
a:visted { color: purple; }
偽類選擇器，visted已被訪問過的樣式，hover鼠標(biāo)經(jīng)過的樣式，link未被訪問的樣式。三種偽類選擇器常用于鏈接，但不是說只適用于鏈接，可惜的是IE6只支持將這三種偽類選擇器作用于鏈接。

這里說明一點(diǎn)，由于CSS優(yōu)先級的關(guān)系(后面比前面的優(yōu)先級高)，這幾個偽類的書寫順序，一般是link、visted、hover、active。

7. X + Y（相鄰）
ul + p { color: red;}
相鄰選擇器，上述代碼中就會匹配在ul后面的第一個p，將段落內(nèi)的文字顏色設(shè)置為紅色。(只匹配一個元素)

8. X > Y（子）
子選擇器，留意X > Y與X Y的區(qū)別，前者是子孫選擇器，即無視層級，而X Y是字選擇器，只匹配X下的子元素Y。

從理論上來講X > Y是值得提倡選擇器，可惜IE6不支持。

9. X ~ Y
ul ~ p {color: red;}
相鄰選擇器，與X+Y類似，不同的是X ~ Y匹配的是元素集合，如上述代碼，匹配的是所有ul相鄰的p