CSS復合選擇器的功能介紹

這篇文章主要講解了“CSS復合選擇器的功能介紹”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS復合選擇器的功能介紹”吧！

一、交集選擇器

• 又稱標簽指定式選擇器

• 作用：選擇出同時符合兩個標簽的內容

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

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

div.student{
				color: red;
}

二、并集復合選擇器

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

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

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

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

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

三、層級選擇器

1、后代元素復合器

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

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

• 例如：愚公的后代想要集體染發(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)是根據用戶行為而動態(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)建一些不在文檔樹中的元素，并為其添加樣式。

五、屬性選擇器

感謝各位的閱讀，以上就是“CSS復合選擇器的功能介紹”的內容了，經過本文的學習后，相信大家對CSS復合選擇器的功能介紹這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！