基本選擇器

• 回顧選擇器
  • 通配符選擇器
  • 元素選擇器
  • 類選擇器
  • 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

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=b1kj20j&title=CSS3選擇器