CSS3經常使用選擇器

 

1、基本選擇器

 

• 子元素選擇器

概念：子元素選擇器只能選擇某元素的子元素
語法格式：父元素 > 子元素 （Father > Children）
兼容性：IE8+、FireFox、Chrome、Safari、Opera

 

• 相鄰兄弟元素選擇器

概念：相鄰兄弟選擇器能夠選擇緊接在另外一元素後的元素，並且他們具備一個相同的父元素
語法格式：元素 + 兄弟相鄰元素 （Eelement + Sibling）
兼容性：IE8+、FireFox、Chrome、Safari、Opera

 

• 通用兄弟選擇器

概念：選擇某元素後面的全部兄弟元素，並且他們具備一個相同的父元素
語法格式：元素 ~ 後面全部兄弟相鄰元素 （Eelement ~ Siblings）
兼容性：IE8+、FireFox、Chrome、Safari、Opera

 

• 羣組選擇器

概念：羣組選擇器是將具備相一樣式的元素分組在一塊兒，每一個選擇器之間使用逗號「,」隔開
語法格式：元素1, 元素2, …, 元素n （Eelement1, Element2, …, Elementn）
兼容性：IE6+、FireFox、Chrome、Safari、Opera

 

2、屬性選擇器

 

• 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

 

3、僞類選擇器

 

一、動態僞類

 

• 錨點僞類

:link, :visited

 

• 用戶行爲僞類

:hover, :active, :focus

 

• UI元素狀態僞類

:enabled 選擇器匹配每一個已啓用的元素（大多用在表單元素上）
:disabled 選擇器匹配每一個被禁用的元素（大多用在表單元素上）
:checked 選擇器匹配每一個已被選中的 input 元素（只用於單選按鈕和複選框）
兼容性：IE9+、FireFox、Chrome、Safari、Opera

 

二、CSS3結構類

 

• Element:first-child

概念：選擇屬於其父元素的首個子元素的每一個 Element 元素
兼容性：IE8+、FireFox、Chrome、Safari、Opera

 

• Element:last-child

概念：指定屬於其父元素的最後一個子元素的 Element 元素
兼容性：IE8+、FireFox、Chrome、Safari、Opera

 

• Element:nth-child(N)

概念：匹配屬於其父元素的第 N 個子元素，不論子元素是哪一個都算入，匹配不到Element則無效
兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

 

• 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-of-type(N)

概念：匹配屬於父元素的特定類型的第 N 個子元素的每一個元素
兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

 

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

概念：匹配屬於父元素的特定類型的第 N 個子元素的每一個元素，從最後一個子元素開始計數
兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

 

• Element:first-of-type

概念：匹配屬於其父元素的特定類型的首個子元素的每一個元素
兼容性：IE9+、FireFox、Chrome、Safari、Opera

 

• Element:last-of-type

概念：匹配屬於其父元素的特定類型的最後一個子元素的每一個元素
兼容性：IE9+、FireFox、Chrome、Safari、Opera

 

• Element:only-child

概念：匹配屬於其父元素的惟一子元素的每一個元素

兼容性：IE9+、FireFox、Chrome、Safari、Opera

 

• Element:only-of-type

概念：匹配屬於其父元素的特定類型的惟一子元素的每一個元素
兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

 

• Element:empty

概念：匹配沒有子元素（包括文本節點）的每一個元素
兼容性：IE9+、FireFox、Chrome、Safari、Opera

 

• 否認選擇器（:not）

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

 

三、僞元素

 

• Element::first-line

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

 

• Element::first-letter

概念：用於向文本的首字母設置特殊樣式
說明："first-letter" 僞元素只能用於塊級元素

 

• Element::before

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

 

• Element::after

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

.header::after{
    display: block;
    content: "";
    clear: both;
}

 

• Element::selection

概念：用於設置在瀏覽器中選中文本後的背景色與前景色
兼容性：::selection在IE家族中，只有IE9+版本支持，在Firefox中須要加上其前綴「-moz」