摘要

本文和大家重點學習一下五類CSS選擇器，我們不必通篇給每一個元素定義類（class）或ID，通過合適的組織，可以用最簡單的方法實現同樣的效果。

最常用的五類CSS選擇器

一些新手朋友對選擇器一知半解，不知道在什麼情況下運用什麼樣的選擇器，這是一個比較頭疼的問題，針對新手朋友，對CSS選擇器作一些簡單的說明，希望能對大家的學習工作有一定的幫助。

準確而簡潔的運用CSS選擇器會達到非常好的效果。我們不必通篇給每一個元素定義類（class）或ID，通過合適的組織，可以用最簡單的方法實現同樣的效果。在實際工作中，最常用的選擇器有以下五類：

一、標籤選擇器：

顧名思議，標籤選擇器是直接將HTML標籤作為選擇器，可以是p、h1、dl、strong等HTML標籤。如：

二、id選擇器：

每一個標籤他都有一個共同屬性id,所以我們通常給頁面元素定義id。如圖所示.

其中”p1”,”p2”,”p3”是你自己定義的id名稱。注意在前面加”#”號。
id選擇器也同樣支援後代選擇器(針對巢狀標籤) 如圖所示:

三、類（class）選擇器：

每一個標籤同樣都有一個類屬性,所以在CSS裡用一個點開頭表示類別選擇器定義，例如：

在頁面中，用class=”類別名”的方法呼叫,這個方法比較簡單靈活，可以隨時根據頁面需要新建和刪除。但需要避免多class綜合症。

四、群組選擇器：

當幾個元素樣式屬性一樣時，可以共同呼叫一個宣告，元素之間用逗號分隔。如：

下面來看(標籤,id,類)群組選擇器如圖:

使用組群選擇器，將會大大的減化CSS程式碼，將具有多個相同屬性的元素，合併群組進行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率與CSS檔案體積。

五、後代選擇器：

後代選擇器也稱作為派生選擇器,通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
在 CSS 中，通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由於它們依賴於上下文關係來應用或者避免某項規則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器，我們可以使 HTML 程式碼變得更加整潔。
比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：
請注意標記為 的藍色程式碼的上下文關係：

在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，程式碼更加簡潔。

結合使用上面的五種CSS選擇器，基本滿足了CSS佈局的需要，主要在於靈活的使用，特別是後代選擇器的使用能大大的簡化HTML文件，使HTML做到結構化明確，最小的程式碼實現同樣的效果。
選擇器講完了,我們來看看選擇器的優先順序.

六 比較器的優先順序

比較同一級別的個數，數量多的優先順序高，如果相同即比較下一級別的個數 ，至於各級別的優先順序，大家應該已經很清楚了，就是：

important > 內聯 > ID > 類 > 標籤 | 偽類 | 屬性選擇 > 偽物件 > 繼承 > 萬用字元 萬用字元 > 繼承

這也就解釋了為什麼11個標籤的定義會比不上1個類的定義，1個類加11個標籤會比不上2個類的權重高。

選擇器的優先順序計算細則就顯得很重要了。
之前有人說選擇器的優先順序是tagname=1,classname=10,id=100, 因此選擇器 #demo > ul > .active的優先順序就是 100+10+1 = 111,實際上真是這麼計算的嘛，難道10個class就和一個id的優先順序是一樣的？

下面看看官方對選擇器的定義：
一個選擇器的優先順序由四個數字a,b,c,d確定。當比較兩個選擇器時，先比較a，a值大的優先順序高，如果a相等則比較b，b值大的優先順序高，以此類推。因此，無論b的值多大，也不會對a值的比較造成影響。

a由style確定，如果一個屬性由元素上的style屬性定義則a為1，否則a為0
b是id的數量
c是class和偽類以及屬性的數量
d是tagname以及偽元素的數量

按照這個規則，我們來看看下面這個選擇器的優先順序：

下面我們來看一下優先順序的例子,如圖所示:

上例中的元素是綠色的，因為內聯元素的優先順序最高
同時也可以得出結論，低優先順序選擇器的疊加是不會影響高優先順序的選擇器的.

結束

總結完了,大家看後有沒有有所收穫!