原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 發(fā)表于 2012 年 6 月,介紹了 30 種最常用的 CSS 選擇器用法,多加了一種,變成了牢記 31 種選擇器用法。其他 CSS3 選擇器用法請查看 CSS3 selectors explained 這篇文章,此外,W3C CSS3 選擇器官方文檔 Selectors Level 3 W3C Recommendation 29 September 2011 記錄在這里留待有疑問的時候查看。
1. *
* { margin: 0; padding: 0;}
星號選擇器用于選取頁面中的所有元素,可用于快速清除所有元素的
margin 與 padding,但最好只在測試的時候使用,而不要正式用在 CSS 文件中,否則會大大加重瀏覽器負(fù)擔(dān)。此外,星號選擇器也可以給父層的所有子元素設(shè)定樣式,重復(fù)一遍,盡量少用這種方式:#container * { border: 1px solid black;}
兼容 IE6+
2. #X
#container { width: 960px; margin: auto;}
id 選擇器,最常見的選擇器用法之一,不可重復(fù)使用。
兼容 IE6+
3. .X
.error { color: red;}
class 選擇器,也是最常見的選擇器用法之一,與 id 選擇器不同的是 class 選擇器可同時選取多個元素,而 id 選擇器只能給一個獨一無二的元素設(shè)定樣式。
兼容 IE6+
4. X Y
li a { text-decoration: none;}
后代選擇器 (descendant selector),選取 X 元素內(nèi)的所有 Y 元素,比如上面這段代碼將選取 li 標(biāo)簽內(nèi)的所有鏈接。
兼容 IE6+
5. X
a { color: red; }ul { margin-left: 0; }
標(biāo)簽選擇器 (type selector),用于選取 HTML 標(biāo)簽 (tag)。
兼容 IE6+
6.
and X:visitedX:link
a:link { color: red; }a:visted { color: purple; }
:link 偽類選擇器 (pseudo class selector) 用于選取所有未點擊過的鏈接,而 :visited 則用于選取所有已訪問過的鏈接。兼容 IE6+
7. X + Y
新聞熱點
疑難解答