基本選擇器

• 回顧選擇器
  • 通配符選擇器
  • 元素選擇器
  • 類選擇器
  • ID選擇器
  • 後代選擇器
• 新增基本選擇器
  • 子元素選擇器
  • 相鄰兄弟選擇器
  • 通用兄弟選擇器
  • 群組選擇器

子元素選擇器

概念：子元素選擇器只能選擇某元素的子元素

語法：父元素 > 子元素 （Father>Children）

相容性：IE8+、Firefox、Chrome、Safari、Opera

相鄰兄弟元素選擇器

概念：相鄰兄弟選擇器可以選擇緊接在另一個元素後的元素，而且她們具有同一個相同的父元素

語法格式：元素 + 兄弟相鄰元素 (Element + Sibling)

相容性：IE8+、Firefox、Chrome、Safari、Opera

通用兄弟選擇器

概念：選擇某元素後面的所有兄弟元素，而且他們具有一個相同的父元素

語法格式：元素 ~ 後面所有兄弟相鄰元素 (Element ~ Siblings)

相容性：IE8+、Firefox、Chrome、Safari、Opera

群組選擇器

概念：群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開

語法格式：元素1，元素2.....，元素n

相容性：IE6+、Firefox、Chrome、Safari、Opera

Element[attribute]

概念：選擇所有帶有attribute屬性的元素

相容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute="value"]

概念：選擇所有使用 attribute="value"的元素

相容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute~="value"]

概念：選擇attribute屬性包含單詞“value”的元素

相容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute^="value"]

概念：選擇attribute屬性值以“value”開頭的所有元素

相容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute$="value"]

概念：選擇attribute屬性值以“value”結尾的所有元素

相容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute*="value"]

概念：選擇attribute屬性值包含“value”的所有元素

相容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute|="value"]

概念：選擇attribute屬性值為“value”或以“value-”開頭的元素

相容性：IE8+、Firefox、Chrome、Safari、Opera

偽類選擇器

• 動態偽類
• UI元素狀態偽類
• CSS3結構類
• 否定選擇器
• 偽元素

動態偽類

這些偽類不存在於HTML中，只有當用戶和網站交互的時候才能體現出來

• 錨點偽類
  • :link
  • :visited
• 用戶行為偽類
  • :hover
  • :active
  • focus

UI元素狀態偽類

概念：把":enabled"，":disabled"，":checked"偽類稱為UI元素狀態偽類

相容性：IE9+、Firefox、Chrome、Safari、Opera

:nth選擇器

我們把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-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)

概念：:nth-child(N)選擇器匹配屬於其父元素的第N個子元素，不論元素的類型

相容性：IE9+、Firefox4+、Chrome、Safari、Opera

關於參數(N)

• Element:nth-child(number) ———— 選擇某元素下的第number個element元素

• Element:nth-child(n) ———— n是一個簡單表達式，取值從”0“開始計算。這裡只能是"n"，不能是其他字母代替

• Element:nth-child(odd)、Element:nth-child(even) ———— odd和even是可用於匹配下標是奇數或偶數的element元素的關鍵字（第一個下標是1）

Element:nth-last-child(N)

概念：匹配屬於其元素的第N個子元素的每個元素，不論元素的類型，從最後一個子元素開始計數

相容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:nth-last-of-type(N)

概念：匹配屬於父元素的特定類型的第N個子元素的每個元素，從最後一個子元素開始計數

相容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:last-of-type(N)

概念：:last-of-type 選擇器匹配屬於其父元素的特定類型的最後一個子元素的每個元素

相容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:only-child(N)

概念：:only-child 選擇器匹配屬於其父元素的唯一子元素的每個元素

相容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:only-of-type(N)

概念：:only-of-type 選擇器匹配屬於其父元素的特定類型的唯一子元素的每個元素

相容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:empty

概念：:empty 選擇器匹配沒有子元素（包括文本節點）的每個元素

相容性：IE9+、Firefox4+、Chrome、Safari、Opera

否定選擇器

概念：:not(Element/Selector)選擇器匹配非指定元素/選擇器的每個元素

語法格式：父元素:not（子元素|子選擇器）(Father:not(Children|selector))

相容性：IE9+、Firefox4+、Chrome、Safari、Opera

偽元素

偽元素 ———— Element::first-line

概念：根據”first-line“偽元素中的樣式對element元素的第一行文本進行格式化

說明：”first-line“偽元素只能用於塊級元素

偽元素 ———— Element::first-letter

概念：用於向文本的首字母設置特殊樣式

說明：”first-letter“偽元素只能用於塊級元素

偽元素 ———— Element::before

概念：在元素的內容前面插入新內容

說明：常用content配合使用

特點：

• 永遠是第一個子元素
• 行級元素
• 內容通過content寫入
• 標簽中找不到對應的標簽

偽元素 ———— Element::after

概念：在元素的內容後面插入新內容

說明：常用content配合使用，多用於清除浮動

偽元素 ———— Element::selection

概念：用於設置在瀏覽器中選中文本後的背景與前景色

相容性說明：::selection在IE家族中，只用IE9+版本支持，在firefox上要添加首碼-moz

CSS權重

• 什麼是權重

當很多規則被應用到某一個元素上時，權重是一個決定那種規則生效，或者是優先順序的過程

• 權重等級與權值

行內樣式（1000）>ID選擇器（100）> 類、屬性選擇器和偽類選擇器（10）> 元素和偽元素（1）> *（0）

• 權重計算口訣

從0開始，一個行內樣式+1000，一個ID+100，一個屬性選擇器、class或者偽類選擇器+10，一個元素名或者偽元素+1