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

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

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

1.后代選擇器

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

語法：

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

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

例如：

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

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

2.子選擇器

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

語法：

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

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

例如：

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

元素1 和 元素2 中間用 大于號 隔開 ：元素1 是父級，元素2 是子級，最終選擇的是元素2 ，元素2 必須是親兒子，其孫子、重孫之類都不歸他管. 你也可以叫他 親兒子選擇器。

3.并集選擇器

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

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

語法：

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

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

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

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

4.偽類選擇器

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

偽類選擇器書寫最大的特點是用冒號(:)表示，比如 :hover 、 :first-child 。

因為偽類選擇器很多，比如有鏈接偽類、結(jié)構(gòu)偽類等，所以這里先給大家講解常用的鏈接偽類選擇器。

（1）鏈接偽類選擇器

書寫鏈接偽類選擇器注意以下三點：

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

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

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

鏈接偽類選擇器實際工作開發(fā)中的寫法：

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

5.focus 偽類選擇器

:focus 偽類選擇器用于選取獲得焦點的表單元素。

焦點就是光標(biāo)，一般情況<input>類表單元素才能獲取，因此這個選擇器也主要針對于表單元素來說。

input:focus 
{ 
background-color:yellow; 
}

總結(jié)：