本篇文章給大家詳細介紹一下CSS中的復合選擇器，了解一下css中的交集選擇器、并集復合選擇器、層級選擇器、偽類與偽元素選擇器、屬性選擇器，一起學習吧！

一、交集選擇器

• 又稱標簽指定式選擇器

• 作用：選擇出同時符合兩個標簽的內(nèi)容

• 格式：1.由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器或id選擇器；2.兩個選擇器之間不能有空格

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

div.student{ 				color: red; }

二、并集復合選擇器

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

• 格式：各個選擇器通過逗號連接而成

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

• 例如：校長要求學校標語、全體老師、郭越以后寫字只能寫宋體

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

三、層級選擇器

1、后代元素復合器

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

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

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

#yuGong .people{    			color: red;    		}

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

2、子元素復合選擇器

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

• 格式：父級標簽寫在前面，子級標簽寫在后面，中間由 > 進行連接

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

#yuGong>.people{    			color: red; }

• 注意:此時愚公的后代中所有people類的親兒子都會染發(fā)，愚公的孫子，曾孫子并沒有染發(fā)，因為年紀尚幼 這里只會選擇子元素(親兒子)

3、臨近兄弟選擇器

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

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

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

#secondBaby+#thirdBaby{    			color: red; }

4、普通兄弟選擇器

• 作用：選擇與另一個元素同級的元素，而且二者有相同的父元素

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

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

#bigBaby~#thirdBaby{    			color: red; }

四、偽類與偽元素選擇器

0、“偽”是什么？

• “偽”是指該選擇器用來修飾不在文檔樹中的部分。

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

1、偽類選擇器

• 作用：用于當已有元素處于的某個狀態(tài)時，為其添加對應的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。

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

1）link

• 作用：設置該元素（超鏈接）未訪問的樣式

• 格式：

a:link{...}

2）visited

• 作用：設置該元素（超鏈接）已訪問過的樣式

• 格式：

a:visited{...}

3）hover

• 作用：設置該元素鼠標懸停時的樣式

• 格式：

a:hover{...}

4）activer

• 作用：設置該元素活動（鼠標按下）的樣式

• 格式：

a:active{...}

5）focus

• 作用：設置該元素獲取焦點的樣式

• 格式：

a:focus{...}

注意：偽類的順序不要顛倒，要按照link-visited-hover-active的順序，否則可能會出錯

2、偽元素選擇器

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

五、屬性選擇器