一、基本選擇器

• 子元素選擇器

概念：子元素選擇器只能選擇某元素的子元素
語法格式：父元素 > 子元素 （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

二盖矫、屬性選擇器

• 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" 結(jié)尾的所有元素
兼容性：IE8+达箍、FireFox、Chrome铺厨、Safari缎玫、Opera

• Element[attribute|=“value”]

概念：選擇 attribute 屬性值為 "value”或以 "value-" 開頭的元素
兼容性：IE8+、FireFox解滓、Chrome赃磨、Safari、Opera

三洼裤、偽類選擇器

1邻辉、動態(tài)偽類

• 錨點偽類

:link, :visited

• 用戶行為偽類

:hover, :active, :focus

• UI元素狀態(tài)偽類

:enabled 選擇器匹配每個已啟用的元素（大多用在表單元素上）
:disabled 選擇器匹配每個被禁用的元素（大多用在表單元素上）
:checked 選擇器匹配每個已被選中的 input 元素（只用于單選按鈕和復(fù)選框）
兼容性：IE9+、FireFox、Chrome值骇、Safari莹菱、Opera

2、CSS3結(jié)構(gòu)類

• 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是一個簡單表達(dá)式，取值從“0”開始計算峡扩。這里只能是“n”蹭越，不能用其他字母代替。

• Element:nth-child(odd)教届、Element:nth-child(even)

odd和even是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的Element元素的關(guān)鍵詞（第一個的下標(biāo)是 1）

• Element:nth-last-child(N)

概念：匹配屬于其元素的第 N 個子元素的每個元素响鹃，不論元素的類型，從最后一個子元素開始計數(shù)
兼容性：IE9+案训、FireFox4+买置、Chrome、Safari强霎、Opera

• Element:nth-of-type(N)

概念：匹配屬于父元素的特定類型的第 N 個子元素的每個元素
兼容性：IE9+忿项、FireFox4+、Chrome城舞、Safari轩触、Opera

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

概念：匹配屬于父元素的特定類型的第 N 個子元素的每個元素，從最后一個子元素開始計數(shù)
兼容性：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

概念：匹配沒有子元素（包括文本節(jié)點）的每個元素
兼容性：IE9+繁调、FireFox、Chrome靶草、Safari蹄胰、Opera

• 否定選擇器（:not）

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

3派继、偽元素

• Element::first-line

概念：根據(jù) "first-line" 偽元素中的樣式對 Element 元素的第一行文本進(jìn)行格式化
說明："first-line" 偽元素只能用于塊級元素

• Element::first-letter

概念：用于向文本的首字母設(shè)置特殊樣式
說明："first-letter" 偽元素只能用于塊級元素

• Element::before

概念：在元素的內(nèi)容前面插入新內(nèi)容
說明：常用"content"配合使用

• Element::after

概念：在元素的內(nèi)容后面插入新內(nèi)容
說明：常用“content”配合使用宾袜，多用于清除浮動
清除浮動例子：

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

• Element::selection

概念：用于設(shè)置在瀏覽器中選中文本后的背景色與前景色
兼容性：::selection在IE家族中，只有IE9+版本支持驾窟，在Firefox中需要加上其前綴“-moz”