HTML5學堂：我們學過了最為基礎的id，類名和標籤名選擇器，然後就一直用它們了嗎？如果是這樣，那會丟失掉CSS選擇器強大的功能。我們會花費幾篇文章的篇幅，將CSS1.0版本至當前最新的3.0版本當中，存在的所有選擇器講解一遍，今天我們先來說說比較基礎的選擇器。

萬用字元選擇器

基本語法

* {
margin: 0;
padding: 0;
}

HTML5學堂的一些提醒：

對於初學者，在學習更多高階選擇器之前，最先了解的選擇器。

星號選擇器將匹配頁面裡的每一個元素。很多開發者使用這個技巧將外邊距和內邊距重置為零。雖然在快速測試時這確實很好用，但建議永遠不要使用它，它會給瀏覽器帶來大量不必要的負擔。我們通常通過reset檔案進行樣式的重置。

此外，* 也能作為子選擇符使用。

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

這將匹配#h5course的每一個後代元素。

相容性

IE6+、Firefox、Chrome、Safari、Opera

id選擇器

基本語法

#X

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

HTML5學堂的一些提醒：

#號字首允許我們通過id選擇標籤。這是最常見的用法，不過應該慎重使用ID選擇器。

id選擇符是唯一的，不允許重複使用。如果可能的話，先嚐試使用一個標籤名稱，一個新的HTML5元素，甚至是一個偽類。

相容性

IE6+、Firefox、Chrome、Safari、Opera

類名選擇器

基本語法

.X

.h5course {
width: 960px;
margin: auto;
}

HTML5學堂的一些提醒：

id和類的不同之處在於後者可以多次使用。當你想給一組元素應用樣式的時候可以使用類選擇符，當需要給特殊元素應用樣式的時候才使用id。

通常設定id，往往與JS相關~

相容性

IE6+、Firefox、Chrome、Safari、Opera

標籤名選擇器

基本語法

X

div {
width: 960px;
margin: auto;
}

HTML5學堂的一些提醒：

如果你想根據頁面元素的型別，而不是id或類名，匹配到頁面上的相應元素，那麼可以使用標籤名選擇器，但是很不建議單獨使用標籤名選擇器進行樣式控制，原因很簡單——選擇範圍太廣，容易對其他元素造成影響。

相容性

IE6+、Firefox、Chrome、Safari、Opera

後代選擇器

基本語法

X Y

.h5course div {
width: 960px;
margin: auto;
}

HTML5學堂的一些提醒：

當你需要給你的選擇符增加特殊性的時候，可以使用。例如，如果你只想匹配類名為h5course下的div元素？此時後代選擇符派上用場。

如果你的選擇符看起來像這樣 X Y Z A B.error，那你就錯了，並非一味的後代就是合理的~時常問問自己，是否有必要這麼做~

相容性

IE6+、Firefox、Chrome、Safari、Opera

偽類選擇器

基本語法

X:visited and X:link

a:link {
color: red;
}
a:hover {
color: purple;
}

HTML5學堂的一些提醒：

比較經典的偽類選擇器有四種，分別是hover、link、active、visited。最初偽類選擇器只能應用於a標籤，從IE7之後，其他瀏覽器也支援其他標籤的偽類效果了。可以把偽類理解為一種標籤的狀態。如，a:hover表示的就是當滑鼠懸停在a標籤上時的效果。

相容性

IE7+、Firefox、Chrome、Safari、Opera

相鄰選擇器

基本語法

X + Y

ul + .h5course {
color: red;
}

HTML5學堂的一些提醒：

只選擇緊貼在X元素之後Y元素。上面的例子，僅每一個ul之後的第一個類名為h5course元素的文字為紅色。

相容性

IE7+、Firefox、Chrome、Safari、Opera

子代選擇器

基本語法

X > Y

#h5course > p {
color: red;
}

HTML5學堂的一些提醒：

X Y和X > Y之間的不同點是後者只選擇直接子代。

選擇符#h5course > p將只選擇id為h5course的元素的直接子代p。它不匹配更深層的p元素。

相容性

IE7+、Firefox、Chrome、Safari、Opera

兄弟選擇器

基本語法

X ~ Y

ul ~ div {
color: red;
}

HTML5學堂的一些提醒：

與相鄰選擇符（ul + div）僅選擇前一個選擇符後面的第一個元素比起來，兄弟選擇符更寬泛。它會選擇，我們上面例子中更在ul後面的任何div元素。

相容性

IE7+、Firefox、Chrome、Safari、Opera

屬性選擇器

基本語法

X[title]

a[title] {
color: red;
}

HTML5學堂的一些提醒：

屬性選擇器，在我們上面的例子裡，這隻會選擇有title屬性的錨標籤。沒有此屬性的錨標籤將不受影響。

相容性

IE7+、Firefox、Chrome、Safari、Opera