什么是復(fù)合選擇器？CSS 的復(fù)合選擇器

在 CSS 中，可以根據(jù)選擇器的類(lèi)型把選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器，復(fù)合選擇器是建立在基礎(chǔ)選擇器之上，對(duì)基本選擇器進(jìn)行組合形成的。

復(fù)合選擇器可以更準(zhǔn)確、更高效的選擇目標(biāo)元素(標(biāo)簽)，它由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過(guò)不同的方式組合而成的，常用的復(fù)合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類(lèi)選擇器等等。

1.后代選擇器

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

語(yǔ)法：

元素1 元素2 { 樣式聲明 }

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

例如：

ul li { 樣式聲明 } /* 選擇 ul 里面所有的 li標(biāo)簽元素 */

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

2.子選擇器

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

語(yǔ)法：

元素1 > 元素2 { 樣式聲明 }

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

例如：

div > p { 樣式聲明 } /* 選擇 div 里面所有最近一級(jí) p 標(biāo)簽元素 */

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

3.并集選擇器

并集選擇器可以選擇多組標(biāo)簽, 同時(shí)為他們定義相同的樣式。通常用于集體聲明。

并集選擇器是各選擇器通過(guò)英文逗號(hào)(,)連接而成，任何形式的選擇器都可以作為并集選擇器的一部分。

語(yǔ)法：

元素1,元素2 { 樣式聲明 }

上述語(yǔ)法表示選擇元素1 和 元素2，例如：

ul,div { 樣式聲明 } /* 選擇 ul 和 div標(biāo)簽元素 */

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

4.偽類(lèi)選擇器

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

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

因?yàn)閭晤?lèi)選擇器很多，比如有鏈接偽類(lèi)、結(jié)構(gòu)偽類(lèi)等，所以這里先給大家講解常用的鏈接偽類(lèi)選擇器。

（1）鏈接偽類(lèi)選擇器

書(shū)寫(xiě)鏈接偽類(lèi)選擇器注意以下三點(diǎn)：

① 為了確保生效，請(qǐng)按照 LVHA 的循順序聲明 :link-:visited-:hover-:active。

② 記憶法：love hate 或者 lv 包包 hao 。

③ 因?yàn)?a 鏈接在瀏覽器中具有默認(rèn)樣式，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式。

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

/* a 是標(biāo)簽選擇器 所有的鏈接 */ 
a { 
color: gray; 
} 
/* :hover 是鏈接偽類(lèi)選擇器 鼠標(biāo)經(jīng)過(guò) */ 
a:hover { 
color: red; /* 鼠標(biāo)經(jīng)過(guò)的時(shí)候，由原來(lái)的 灰色 變成了紅色 */ 
}

5.focus 偽類(lèi)選擇器

:focus 偽類(lèi)選擇器用于選取獲得焦點(diǎn)的表單元素。

焦點(diǎn)就是光標(biāo)，一般情況<input>類(lèi)表單元素才能獲取，因此這個(gè)選擇器也主要針對(duì)于表單元素來(lái)說(shuō)。

input:focus 
{ 
background-color:yellow; 
}

總結(jié)：