你也許已經(jīng)掌握了id、class、后臺(tái)選擇器這些基本的css選擇器。但這遠(yuǎn)遠(yuǎn)不是css的全部。下面向大家系統(tǒng)的解析css中30個(gè)最常用的選擇器，包括我們最頭痛的瀏覽器兼容性問(wèn)題。掌握了它們，才能真正領(lǐng)略css的巨大靈活性。

1.

* {
    margin: 0;
    padding: 0;
   }
星狀選擇符會(huì)在頁(yè)面上的每一個(gè)元素上起作用。web設(shè)計(jì)者經(jīng)常用它將頁(yè)面中所有元素的margin和padding設(shè)置為0。

*選擇符也可以在子選擇器中使用。

#container * {
     border: 1px solid black;
   }
上面的代碼中會(huì)應(yīng)用于id為container元素的所有子元素中。

除非必要，我不建議在頁(yè)面中過(guò)的的使用星狀選擇符，因?yàn)樗淖饔糜蛱螅喈?dāng)耗瀏覽器資源。

兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

2. #X

#container {
      width: 960px;
      margin: auto;
   }
井號(hào)作用域有相應(yīng)id的元素。id是我們最常用的css選擇器之一。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選擇器的地步？

兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

3.  .X

.error {
     color: red;
   }

這是一個(gè)class(類)選擇器。class選擇器與id選擇器的不同是class選擇器能作用于期望樣式化的一組元素。

兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

4. X Y

li a {
     text-decoration: none;
   }

這也是我們最常用的一種選擇器——后代選擇器。用于選取X元素下子元素Y，要留意的點(diǎn)是，這種方式的選擇器將選取其下所有匹配的子元素，無(wú)視層級(jí)，所以有的情況是不宜使用的，比如上述的代碼去掉li下的所有a的下劃線，但li里面還有個(gè)ul，我不希望ul下的li的a去掉下劃線。使用此后代選擇器的時(shí)候要考慮是否希望某樣式對(duì)所有子孫元素都起作用。這種后代選擇器還有個(gè)作用，就是創(chuàng)建類似命名空間的作用。比如上述代碼樣式的作用域明顯為li。

兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera