一、五大基本選擇符

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

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

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

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

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

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

.error {color: red;}

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

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

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

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

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

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

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

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

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

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

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