CSS選擇器學習之聊聊複合選擇器（詳細介紹）

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

一、交集選擇器

• 又稱標籤指定式選擇器

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

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

• 例如：老師請他的班級中所有學生把頭髮染成紅色

div.student{
				color: red;
}

二、並集複合選擇器

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

• 格式：各個選擇器透過

  逗號連接而成

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

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

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

三、層級選擇器

1、後代元素複合器

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

• #格式：外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔

• 例如：愚公的後代想要集體染髮

#yuGong .people{
   			color: red;
   		}

• 注意：此時愚公的後代中

  所有people類別的後代都會染髮，包括愚公的兒子，孫子，曾孫子…

##2、子元素複合選擇器

作用：選擇作為某元素子元素(親兒子)的元素
格式：父級標籤寫在前面，子級標籤寫在後面，中間由> 進行連接
#例如：愚公的兒子們想要集體染髮

• #yuGong>.people{
     			color: red;
  }

注意:此時愚公的後代中所有people類的
• 親兒子

  都會染髮，愚公的孫子，曾孫子並沒有染髮，因為年紀尚幼 這裡只會選擇子元素(親兒子)

3、接近兄弟選擇器

#作用：選擇緊接在另一個元素後的元素，而且二者有相同的父元素
格式：選擇器使用加號“ ”來連結前後兩個選擇器。選擇器中的兩個元素有
• 同一個父親

  ，而第二個元素必須緊跟著第一個元素

例如：葫蘆七兄弟裡的三娃要染髮（用二娃定位三娃）

• #secondBaby+#thirdBaby{
     			color: red;
  }

4、普通兄弟選擇器

作用：選擇與另一個元素同級的元素，而且二者有相同的父元素
格式：使用「~」來鏈接前後兩個選擇器。選擇器中的兩個元素有
• 同一個父親

  ，但第二個元素不必緊跟著第一個元素。

例如：葫蘆七兄弟裡的三娃要染髮（用大娃定位三娃）

• #bigBaby~#thirdBaby{
     			color: red;
  }

四、偽類別與偽元素選擇器

0、「偽」是什麼？

「偽」是指該選擇器用來修飾不在文件樹中的部分。
必讀：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

#1、偽類別選擇器

#作用：用來當已有元素處於的某個狀態時，為其添加對應的樣式，這個狀態是根據使用者行為而動態變化的。
以下只介紹上文未詳細說明的
• 狀態偽類別

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、偽元素選擇器

  • 作用：用於建立一些不在文件樹中的元素，並為其新增樣式。

  ##::first-line選取選擇器的首行: :before在選擇器前面增加內容，使用content 屬性指定要插入的內容。 （插入的內容其實不在文件樹中）:: after在選擇器後面增加內容，使用content 屬性指定要插入的內容。 （插入的內容其實不在文件樹中）:: selection匹配被使用者選取或處於高亮狀態的部分

  選擇器	作用
  #::first-letter	選取選擇器的首字母	#p::first-letter
  		p::first-line
  		p::before{content: "hello ";}
  		p::after{content: "hello ";}
  		p::selection

  五、屬性選擇器

  選擇器#作用格式p[id^='yuan' ]{color: red;}p[id$='chao']{ color: blue;}

  	#E[att^=value]	表示E標籤的att屬性值是以'value'開頭的
  	E[att$=value]	表示E標籤的att屬性值是以'value'結尾的

  #E[att*=value]

  表示E標籤的att屬性值中包含'value'字串######p[class*='shi']{font-size: 35px;}###############更多程式相關知識，請訪問：###程式設計入門###！ ！ ###

  以上是CSS選擇器學習之聊聊複合選擇器（詳細介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！