本篇文章給大家詳細(xì)介紹一下CSS中的復(fù)合選擇器，了解一下css中的交集選擇器、并集復(fù)合選擇器、層級(jí)選擇器、偽類(lèi)與偽元素選擇器、屬性選擇器，一起學(xué)習(xí)吧！

一、交集選擇器

• 又稱(chēng)標(biāo)簽指定式選擇器

• 作用：選擇出同時(shí)符合兩個(gè)標(biāo)簽的內(nèi)容

• 格式：1.由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器或id選擇器；2.兩個(gè)選擇器之間不能有空格

• 例如：老師要求他的班級(jí)中所有學(xué)生把頭發(fā)染成紅色

div.student{ 				color: red; }

二、并集復(fù)合選擇器

• 作用：將選中的所有選擇器定義相同的樣式

• 格式：各個(gè)選擇器通過(guò)逗號(hào)連接而成

• 注意：任何選擇器都可以作為并集選擇器的一部分（有容乃大）

• 例如：校長(zhǎng)要求學(xué)校標(biāo)語(yǔ)、全體老師、郭越以后寫(xiě)字只能寫(xiě)宋體

p.slogn,.teacher,#gy{ 				font-family:?"宋體"; }

三、層級(jí)選擇器

1、后代元素復(fù)合器

• 作用：選擇某元素的子子孫孫

• 格式：外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后面，中間用空格分隔

• 例如：愚公的后代想要集體染發(fā)

#yuGong .people{    			color: red;    		}

• 注意：此時(shí)愚公的后代中所有people類(lèi)的后代都會(huì)染發(fā)，包括愚公的兒子，孫子，曾孫子…

2、子元素復(fù)合選擇器

• 作用：選擇作為某元素子元素(親兒子)的元素

• 格式：父級(jí)標(biāo)簽寫(xiě)在前面，子級(jí)標(biāo)簽寫(xiě)在后面，中間由 > 進(jìn)行連接

• 例如：愚公的兒子們想要集體染發(fā)

#yuGong>.people{    			color: red; }

• 注意:此時(shí)愚公的后代中所有people類(lèi)的親兒子都會(huì)染發(fā)，愚公的孫子，曾孫子并沒(méi)有染發(fā)，因?yàn)?span style="text-decoration:line-through;">年紀(jì)尚幼 這里只會(huì)選擇子元素(親兒子)

3、臨近兄弟選擇器

• 作用：選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素

• 格式：選擇器使用加號(hào)“+”來(lái)鏈接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親，而且第二個(gè)元素必須緊跟第一個(gè)元素

• 例如：葫蘆七兄弟里的三娃要染發(fā)（用二娃定位三娃）

#secondBaby+#thirdBaby{    			color: red; }

4、普通兄弟選擇器

• 作用：選擇與另一個(gè)元素同級(jí)的元素，而且二者有相同的父元素

• 格式：使用 “~”來(lái)鏈接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親，但第二個(gè)元素不必緊跟第一個(gè)元素。

• 例如：葫蘆七兄弟里的三娃要染發(fā)（用大娃定位三娃）

#bigBaby~#thirdBaby{    			color: red; }

四、偽類(lèi)與偽元素選擇器

0、“偽”是什么？

• “偽”是指該選擇器用來(lái)修飾不在文檔樹(shù)中的部分。

• 必讀：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

1、偽類(lèi)選擇器

• 作用：用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的。

• 以下只介紹上文中未詳細(xì)說(shuō)明的狀態(tài)偽類(lèi)

1）link

• 作用：設(shè)置該元素（超鏈接）未訪問(wèn)的樣式

• 格式：

a:link{...}

2）visited

• 作用：設(shè)置該元素（超鏈接）已訪問(wèn)過(guò)的樣式

• 格式：

a:visited{...}

3）hover

• 作用：設(shè)置該元素鼠標(biāo)懸停時(shí)的樣式

• 格式：

a:hover{...}

4）activer

• 作用：設(shè)置該元素活動(dòng)（鼠標(biāo)按下）的樣式

• 格式：

a:active{...}

5）focus

• 作用：設(shè)置該元素獲取焦點(diǎn)的樣式

• 格式：

a:focus{...}

注意：偽類(lèi)的順序不要顛倒，要按照l(shuí)ink-visited-hover-active的順序，否則可能會(huì)出錯(cuò)

2、偽元素選擇器

• 作用：用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式。

五、屬性選擇器