1、什么是復(fù)合選擇器？

• 在 CSS 中，可以根據(jù)選擇器的類型把選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器，復(fù)合選擇器是建立在基礎(chǔ)選擇器之上，對(duì)基本選擇器進(jìn)行組合形成的。
• 復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過(guò)不同的方式組合而成的，可以更準(zhǔn)確、更高效的選擇目標(biāo)元素（標(biāo)簽）
• 常用的復(fù)合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類選擇器等等

2、后代選擇器 (重要）

• 定義：
  后代選擇器又稱為包含選擇器，可以選擇父元素里面子元素。其寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。

• 語(yǔ)法：
  

  image
  
  上述語(yǔ)法表示選擇元素 1 里面的所有元素 2 (后代元素)。

• 語(yǔ)法說(shuō)明：

  • 元素1 和 元素2 中間用空格隔開(kāi)
  • 元素1 是父級(jí)，元素2 是子級(jí)，最終選擇的是元素2
  • 元素2 可以是兒子，也可以是孫子等，只要是元素1 的后代即可
  • 元素1 和 元素2 可以是任意基礎(chǔ)選擇器

例子：

image

3、子選擇器 (重要）

• 定義：
  子元素選擇器（子選擇器）只能選擇作為某元素的最近一級(jí)子元素。（簡(jiǎn)單理解就是選親兒子元素）

• 語(yǔ)法：
  

  image
  
  上述語(yǔ)法表示選擇元素1 里面的所有直接后代(子元素) 元素2。

• 語(yǔ)法說(shuō)明：

  • 元素1 和 元素2 中間用 大于號(hào) 隔開(kāi)
  • 元素1 是父級(jí)，元素2 是子級(jí)，最終選擇的是元素2
  • 元素2 必須是親兒子，其孫子、重孫之類都不歸他管. 你也可以叫他 親兒子選擇器

例子：

image

4、并集選擇器 (重要）

• 定義：
  并集選擇器可以選擇多組標(biāo)簽, 同時(shí)為他們定義相同的樣式，通常用于集體聲明。并集選擇器是各選擇器通過(guò)英文逗號(hào)（,）連接而成，任何形式的選擇器都可以作為并集選擇器的一部分。

• 語(yǔ)法：
  

  image
  
  上述語(yǔ)法表示選擇元素1 和 元素2。

• 語(yǔ)法說(shuō)明：

  • 元素1 和 元素2 中間用逗號(hào)隔開(kāi)
  • 逗號(hào)可以理解為和的意思
  • 并集選擇器通常用于集體聲明

例子：

image

5、偽類選擇器

• 定義：
  偽類選擇器用于向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或選擇第1個(gè)，第n個(gè)元素。

• 語(yǔ)法：
  偽類選擇器書(shū)寫(xiě)最大的特點(diǎn)是用冒號(hào)（:）表示，比如 :hover、:first-child。

6、鏈接偽類選擇器

• 定義：
  偽類選擇器用于向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或選擇第1個(gè)，第n個(gè)元素。

• 語(yǔ)法：

  • 偽類選擇器書(shū)寫(xiě)最大的特點(diǎn)是用冒號(hào)（:）表示，比如 :hover、 :first-child

    a:link          沒(méi)有點(diǎn)擊過(guò)的(訪問(wèn)過(guò)的)鏈接
    a:visited   點(diǎn)擊過(guò)的(訪問(wèn)過(guò)的)鏈接
    a:hover         鼠標(biāo)經(jīng)過(guò)的那個(gè)鏈接
    a:active    鼠標(biāo)正在按下還沒(méi)有彈起鼠標(biāo)的那個(gè)鏈接

• 鏈接偽類選擇器注意事項(xiàng)

  • 為了確保生效，請(qǐng)按照 LVHA 的循順序聲明 :link－:visited－:hover－:active。
  • 因?yàn)?a 鏈接在瀏覽器中具有默認(rèn)樣式，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式。

• 鏈接偽類選擇器實(shí)際工作開(kāi)發(fā)中的寫(xiě)法：

image

7、:focus 偽類選擇器

• 定義：
  :focus 偽類選擇器用于選取獲得焦點(diǎn)的表單元素。焦點(diǎn)就是光標(biāo)，一般情況 <input>類表單元素才能獲取

例子：

image

復(fù)合選擇器總結(jié)

image