需要掌握的30個最常用css選擇器解析

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

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

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

上面的代碼中會應(yīng)用于id為container元素的所有子元素中。

除非必要，我不建議在頁面中過的的使用星狀選擇符，因為他的作用域太大，相當(dāng)耗瀏覽器資源。

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

2. #X

井號作用域有相應(yīng)id的元素。id是我們最常用的css選擇器之一。id選擇器的優(yōu)勢是精準，高優(yōu)先級（優(yōu)先級基數(shù)為100，遠高于class的10），作為javascript腳本鉤子的不二選擇，同樣缺點也很明顯優(yōu)先級過高，重用性差，所以在使用id選擇器前，我們最好問下自己，真的到了非用id選擇器的地步？

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

3.  .X

.error {
     color: red;
   }

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

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

4. X Y

li a {
     text-decoration: none;
   }

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

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

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈