CSS常見的選擇器有：

萬用字元選擇器, 元素選擇器，類選擇器， ID選擇器，後代選擇器

CSS3新增基本選擇器有：

子元素選擇器，相鄰兄弟選擇器，通用兄弟選擇器，群組選擇器

基本選擇器—-子元素選擇器

概念：子元素選擇器只能選擇某元素的子元素
語法格式：
父元素 > 子元素 (father > children )
相容性：
IE8+，FireFox，Chrome，Safari，Opera

基本選擇器—-相鄰兄弟元素選擇器

概念：相鄰兄弟元素選擇器可以選擇緊接在另一個元素後的元素，而且他們具有一個相同的父元素
語法格式：
元素+兄弟相鄰元素 (Element + Sibling)
相容性：
IE8+ , FireFox，Chrome，Safari，Opera

基本選擇器—-通用兄弟選擇器

概念：選擇某元素後面的所有兄弟元素，而且他們具有一個相同的父元素
語法格式：
元素~後面的所有兄弟元素 (Element~Siblings)
相容性：
IE8+ , FireFox，Chrome，Safari，Opera

基本選擇器—-群組選擇器

概念：群組選擇器是將具有相同樣式的元素分子在一起，每個選擇器之間使用逗號“，”隔開
語法格式：
元素1，元素2，……，元素N (Element1,Element2,……,Elementn)
相容性：
IE6+ , FireFox，Chrome，Safari，Opera

CSS3屬性選擇器

對帶有制定屬性的HTML元素設定樣式
使用CSS3屬性選擇器，你可以只指定元素的某個屬性，或者你還可以同時指定元素的某個屬性其對應的屬性值。

概念：為帶有attribute屬性的Element元素設定樣式
語法：Element[attribute]
相容性：IE8+ , FireFox，Chrome，Safari，Opera

概念：為attribute=”value” 屬性的Element元素設定樣式
語法：Element[attribute=”value”]
相容性：IE8+ , FireFox，Chrome，Safari，Opera

概念：選擇attribute屬性包含“value
“的元素，並設定其樣式
語法：Element[attribute~=”value”]
相容性：IE8+ , FireFox，Chrome，Safari，Opera
注意：當div[title~=f]時，
<img src="/statics/images/course/klematis.jpg" title="klematis ff" width="150" height="113" />
<img src="/statics/images/course/img_flwr.gif" title="f" width="224" height="162" />

概念：設定attribute屬性值以“value”開頭的所有Element元素的樣式
語法：Element[attribute^=”value”]
相容性：IE8+ , FireFox，Chrome，Safari，Opera

概念：設定attribute屬性值以“value”結尾的所有Element元素的樣式
語法：Element[attribute$=”value”]
相容性：IE8+ , FireFox，Chrome，Safari，Opera

概念：設定attribute屬性值包含“value”的所有Element元素的樣式
語法：Element[attribute*=”value”]
相容性：IE8+ , FireFox，Chrome，Safari，Opera

概念：選擇attribute屬性值為“value”或以“value-”開頭的元素，並設定其樣式
語法：Element[attribute|=”value”]
相容性：IE8+ , FireFox，Chrome，Safari，Opera
注意：這個選擇器不是模糊查詢

CSS3偽類選擇器

包括：

動態偽類（錨點偽類，使用者行為偽類）

動態偽類：
這些偽類並不存在HTML中，只有當用戶和網站互動的時候才能體現出來
錨點偽類：
:link，:visited（訪問之後）
使用者行為偽類：
:hover（滑鼠經過），:active（滑鼠點選），:focus（input游標選中）

UI元素狀態偽類

概念：我們把”:enabled(可輸入)”，”:disabled(不可輸入)”，”:checked(選中狀態，僅相容Opera)”偽類稱為UI元素狀態偽類
相容性：IE9+，Firefox，Chrome，Safari，Opera

CSS3結構類

我們把CSS3 的:nth選擇器稱為CSS3結構類
選擇方法：
:first-child，:last-child，:nth-child()，:nth-last-child()，:nth-of-type()，:nth-last-of-type()，:first-of-type，:last-of-type，:only-child，:only-of-type，:empty

Element:first-child
概念：選擇屬於父元素的首個子元素的每個Element元素，併為其設定樣式
相容性：IE8+，Firefox，Chrome，Safari，Opera

Element:last-child
概念：指定屬於其父元素的最後一個元素的Element元素的樣式
相容性：IE8+，Firefox，Chrome，Safari，Opera

Element:nth-child(N)
概念：匹配屬於其父元素的第N個子元素，不論元素的型別
n是一個簡單的表示式，取值從0開始計算。這裡只能是n，不能用其他字母代替。
Element:nth-child(odd)，Element:nth-child(even)
odd和even是可用於匹配下標是奇數或偶數的Element元素的關鍵詞（第一個的下標是1）
相容性：IE8+，Firefox4+，Chrome，Safari，Opera

Element:nth-last-child(N)
概念：匹配屬於其元素的第N個子元素的每個元素，不論元素的型別，從最後一個子元素開始計數
相容性：IE9+，Firefox4+，Chrome，Safari，Opera

Element:nth-of-type(N)
概念：匹配屬於父元素的特定型別的第N個子元素的每個元素
相容性：IE9+，Firefox4+，Chrome，Safari，Opera

Element:nth-of-last-type(N)
概念：匹配屬於父元素的特定型別的第N個子元素的每個元素，從最後一個子元素開始計數
相容性：IE9+，Firefox4+，Chrome，Safari，Opera

Element:first-of-type
概念：匹配屬於其父元素的特定型別的首個子元素的每個元素

Element:last-of-type
概念：匹配屬於父元素的特定型別的最後一個子元素的每個元素
相容性：IE9+，Firefox，Chrome，Safari，Opera

Element:only-child
概念： :only-child選擇器匹配屬於其父元素的唯一子元素的每個元素(即：父元素下只有一個元素且匹配)
相容性：IE9+，Firefox，Chrome，Safari，Opera

Element:only-of-type
概念： :only-of-type選擇器匹配屬於其父元素的特定型別的唯一子元素的每個元素(即：父元素下的子元素只有一個特定型別的元素且匹配，其他型別可忽略)
相容性：IE9+，Firefox4+，Chrome，Safari，Opera

Element:empty
概念：匹配沒有子元素（包括文字節點）的每個元素
相容性：IE9+，FireFox，Chrome，Safari，Opera

否定選擇器（:not）

概念：not(Element/selector)選擇器匹配非指定元素/選擇器的每個元素
語法：父元素:not(子元素/子選擇器)（Father:not(Children/selector)）
相容性：IE9+，FireFox，Chrome，Safari，Opera

偽元素

CSS偽元素用於向某些選擇器設定特殊效果
語法格式：元素::偽元素 （Element::pseudo-element）
相容性：IE9+，FireFox，Chrome，Safari，Opera

偽元素—Element::first-line

概念：根據“first-line”偽元素中的樣式對Element元素的第一行文字進行格式化
說明：“first-line”偽元素只能用於塊級元素

偽元素—Element::first-letter

概念：用於向文字的首字母設定特殊樣式
說明：“first-letter”偽元素只能用於塊級元素

偽元素—Element::before

概念：在元素的內容前面插入新內容
說明：常用“content”配合使用

偽元素—Element::after

概念：在元素的內容後面插入新內容
說明：常用“content”配合使用，多用於清除浮動

偽元素—Element::selection

概念：用於設定在瀏覽器中選中文字後的背景色與前景色
相容性說明：IE瀏覽器只有IE9支援，在火狐中需要加上字首“-moz”

CSS權重

什麼是權重：當很多的規則被應用到某一個元素上時，權重是一個決定哪種規則生效，或者是優先順序的過程
權重等級與權值： 行內樣式（1000）>ID選擇器（100）>類，屬性選擇器和偽類選擇器（10）>元素和偽元素（1）>*（0）
權重計算口訣： 從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器，class或者偽類+10，一個元素名或者偽元素+1

CSS權重規則

包含更高權重選擇器的一條規則擁有更高的權重
ID選擇器（#idValue）的權重比屬性選擇器（[id=“idValue”]）高
帶有上下文關係的選擇器比單純的元素選擇器權重要高
與元素“捱得近”的規則生效
最後定義的這條規則會覆蓋上面與之衝突的規則
無論多少個元素組成的選擇器，都沒有一個class選擇器權重高
萬用字元選擇器權重視0，被繼承的CSS屬性也帶有權重，權重也是0