CSS復(fù)合選擇器

1. 后代選擇器（包含選擇器）

可以選擇父元素里面的子元素。

/*表示選擇元素1里面的所有元素2*/
元素1 元素2 {樣式聲明}

eg.
/*選擇ol里面所有的li標(biāo)簽元素改為藍(lán)色*/
ol li {
    color: blue;
}

注：

• 元素1和元素2 中間用空格隔開
• 元素1是父級(jí)，元素2是子級(jí)，最終選擇的是元素2
• 元素2只要是元素1的后代即可
• 元素1和元素2可以是任意基礎(chǔ)選擇器（基礎(chǔ)選擇器可以查看上一篇博客->https://www.cnblogs.com/chiYiN-zZZ/p/13428522.html ）

針對最后一條寫一個(gè)例子。

<ol class="demo">
    <li></li>
    <li></li>
    <li><span>我想變成藍(lán)色</span></li>
</ol>

/*CSS樣式的后代選擇器寫為如下*/
.demo li span {
    color: blue;
}

2. 子元素選擇器（子選擇器）

只能選擇某元素的最近一級(jí)子元素（只選擇兒子，不選擇其余后代）。

/*表示選擇元素1里面的所有直接后代(子元素)元素2*/
元素1>元素2 {樣式聲明}

eg.
<div>
    <p>我是兒子1
        <p>我是孫子1</p>
    </p>
    <p>我是兒子2
        <p>我是孫子2</p>
    </p>
</div>

/*選擇div里面所有最近一級(jí)p標(biāo)簽元素,字體大小改為12px*/
/*選中的是兒子*/
div > p {
    font-size: 12px;
}

注：

• 元素1和元素2中間用“>”隔開
• 元素1是父級(jí)，元素2是子級(jí)，最終選擇的是元素2
• 元素2必須是親兒子，與剩余后代無關(guān)

3. 并集選擇器

可以選擇多組標(biāo)簽，同時(shí)為它們定義相同的樣式。

通常用于集體聲明。

/*表示選擇元素1和元素2*/
元素1, 元素2 {樣式聲明}

<span>我和div里的文本都會(huì)變成藍(lán)色</span>
<div>
    我和span里的文本都會(huì)變成藍(lán)色
</div>

/*CSS樣式的并集選擇器寫為如下*/
span,
div {
    color: blue;
}

注：

• 元素1和元素2中間用“,”隔開
• 書寫時(shí)建議豎著寫

4. 鏈接偽類選擇器

也可以為a指定類名，然后通過類名使用鏈接偽類選擇器。

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

1. 為了確保生效，請按照LVHA的順序聲明。（:link -> :visited -> :hover -> :active）
2. 因?yàn)閍鏈接在瀏覽器中具有默認(rèn)樣式（顏色為藍(lán)色，有下劃線等），所以在實(shí)際工作中都需要給鏈接單獨(dú)指定樣式。

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

a {
    color: gray;
}

a:hover {
    color: red;/*鼠標(biāo)經(jīng)過的時(shí)候，由原來的灰色變成了紅色*/
}

5. :focus偽類選擇器

用于選取獲得焦點(diǎn)的表單元素，焦點(diǎn)就是光標(biāo)。

一般情況下，<input>類表單元素才能獲取，所以這個(gè)選擇器主要針對于表單元素來說。

eg.
<input type="text" value="我想獲得光標(biāo)后背景顏色就變成紅色">

/*CSS樣式的:focus偽類選擇器寫為如下*/
input:focus {
    background-color: red;
}

6. 總結(jié)