CSS複合選擇器

CSS複合選擇器

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

能夠選擇父元素裏面的子元素。

/*表示選擇元素1裏面的全部元素2*/
元素1 元素2 {樣式聲明}

eg.
/*選擇ol裏面全部的li標籤元素改成藍色*/
ol li {
    color: blue;
}

注：

• 元素1和元素2 中間用空格隔開
• 元素1是父級，元素2是子級，最終選擇的是元素2
• 元素2只要是元素1的後代便可
• 元素1和元素2能夠是任意基礎選擇器（基礎選擇器能夠查看上一篇博客->http://www.javashuo.com/article/p-bgqzgiav-no.html ）

針對最後一條寫一個例子。

<ol class="demo">
    <li></li>
    <li></li>
    <li><span>我想變成藍色</span></li>
</ol>

/*CSS樣式的後代選擇器寫爲以下*/
.demo li span {
    color: blue;
}

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

只能選擇某元素的最近一級子元素（只選擇兒子，不選擇其他後代）。

/*表示選擇元素1裏面的全部直接後代(子元素)元素2*/
元素1>元素2 {樣式聲明}

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

/*選擇div裏面全部最近一級p標籤元素,字體大小改成12px*/
/*選中的是兒子*/
div > p {
    font-size: 12px;
}

注：

• 元素1和元素2中間用「>」隔開
• 元素1是父級，元素2是子級，最終選擇的是元素2
• 元素2必須是親兒子，與剩餘後代無關

3. 並集選擇器

能夠選擇多組標籤，同時爲它們定義相同的樣式。

一般用於集體聲明。

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

<span>我和div裏的文本都會變成藍色</span>
<div>
    我和span裏的文本都會變成藍色
</div>

/*CSS樣式的並集選擇器寫爲以下*/
span,
div {
    color: blue;
}

注：

• 元素1和元素2中間用「,」隔開
• 書寫時建議豎着寫

4. 連接僞類選擇器

類型	做用
a:link	選擇全部未被點擊的連接
a:visited	選擇全部已被點擊的連接
a:hover	選擇鼠標通過的連接
a:active	選擇鼠標按下未彈起的連接

也能夠爲a指定類名，而後經過類名使用連接僞類選擇器。

連接僞類選擇器注意事項：

1. 爲了確保生效，請按照LVHA的順序聲明。（:link -> :visited -> :hover -> :active）
2. 由於a連接在瀏覽器中具備默認樣式（顏色爲藍色，有下劃線等），因此在實際工做中都須要給連接單獨指定樣式。

連接僞類選擇器在實際工做開發中的寫法：

a {
    color: gray;
}

a:hover {
    color: red;/*鼠標通過的時候，由原來的灰色變成了紅色*/
}

5. :focus僞類選擇器

用於選取得到焦點的表單元素，焦點就是光標。

通常狀況下，<input>類表單元素才能獲取，因此這個選擇器主要針對於表單元素來講。

eg.
<input type="text" value="我想得到光標後背景顏色就變成紅色">

/*CSS樣式的:focus僞類選擇器寫爲以下*/
input:focus {
    background-color: red;
}

6. 總結

選擇器	做用	特徵	使用狀況	用法
後代選擇器	選擇後代元素	能夠是子孫後代	較多	.demo span
子元素選擇器	選擇最近一級後代元素	只選擇親兒子	較少	.demo>span
並集選擇器	選擇某些具備相一樣式的元素	能夠用於集體聲明	較多	.demo1, .demo2
連接僞類選擇器	選擇不一樣狀態的連接	與連接相關	較多	a:link、a:visited、a:hover、a:active
:focus僞類選擇器	選擇得到光標的表單	與表單相關	較少	input:focus