雖然這東西很簡單，但是這是最基礎的。能把最基礎的東西運用自如，就已經是高手了。

選擇器的種類可以分為三種：標籤名選擇器、類選擇器和ID選擇器。而所謂的後代選擇器和群組選擇器只不過是對前三種選擇器的擴充套件應用。而在標籤內寫入style=""的方式，應該是CSS的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。而一般人們將上面這幾種方式結合在一起，所以就有了5種或6種選擇器了。

1.標籤選擇器

直接用HTML標籤，又叫型別選擇器，元素選擇器，簡單選擇器。

2.類選擇器

之所以把這一條單獨列出來完全是為了排版好看。

3.ID選擇器

其實我不是為了湊字數，真的。

4.擴充套件用法

好吧，這裡才是重點，融合以上三種選擇器，可以召喚更強大的選擇器：

4.1通用選擇器

用法：*{property：value}

4.2偽類和偽元素

偽類用法：selector : pseudo-class {property: value}

偽元素用法：selector:pseudo-element{property:value}

另外，JQuery還有更強大的選擇器，不過這裡說的是css。

4.3後代選擇器

選擇元素的所有後代:selector1 selector2{...}

對於後代選擇器，瀏覽器CSS匹配不是從左到右進行查詢，而是從右到左進行查詢。比如DIV#divBox p span.red{color:red;}，瀏覽器的查詢順序如下：先查詢html中所有class='red'的span元素，找到後，再查詢其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。這樣做的好處是儘早過濾掉一些無關的樣式規則和元素。

4.4子選擇器

選擇元素的直接後代：selector1 >selector2{...},IE6不支援支援子選擇器。但我們可以模擬子選擇器的效果。比如要實現以下效果：

#nav > li{backgroud:#abc;padding:10px;}

可以先用後代選擇器選擇所有後代：

#nav li{backgroud:#abc;padding:10px;}

然後用通用選擇器覆蓋：

#nav li *{backgroud:none;padding:0;}

4.5相鄰兄弟選擇器

如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。

<div>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
</div>
 

4.6群組選擇器

說它是選擇器，不如說是選擇器的一種用法：selector1，selector2，...{property: value}

4.7屬性選擇器

屬性選擇器根據某個屬性是否存在或屬性的值來尋找元素，非常強大。值得慶幸的是IE6不支援屬性選擇器。

舉個例子吧：

input[type="text"]
{
  margin-bottom:10px;
}

input[type="button"]
{
  width:120px;
}

好了，說了這麼多選擇器大家可能有點暈了，其實大可不必在意這些細節，分類並不重要，會用就行。考慮到這節寫了很多，有關優先順序的問題就下節總結吧。