博學谷 - CSS筆記05 - CSS 的複合選擇器

1.什麼是複合選擇器
複合選擇器是由兩個或者多個基礎選擇器，通過不同的方式組合而成的。
常用的複合選擇器有：後代選擇器，子選擇器，並集選擇器，偽類選擇器等。

2.後代選擇器
後代選擇器又叫包含選擇器，可以選擇父元素裡面的子元素。
語法：

元素1 元素2 { 樣式宣告 }

• 元素1和元素2中間用空格隔開
• 元素1是父級，元素2是子級，最終選擇的是元素2
• 元素2可以是兒子，也可以是孫子，只要是元素1的後代即可
• 元素1和元素2可以是任意的基礎選擇器

demo：

    <style>
        ol li {
            color: pink;
        }
    </style>

    <ol>
        <li>ol的兒子1</li>
        <li>ol的兒子2</li>
        <li>ol的兒子3</li>
        <a href="#">
            <li>ol的孫子1</li>
        </a>
    </ol>
    <ul>
        <li>ul的兒子1</li>
        <li>ul的兒子2</li>
        <li>ul的兒子3</li>
    </ul>

效果：

3.子選擇器
子選擇器只能選擇某元素的最近一級子元素，可理解為親兒子選擇器。
語法：

元素1 > 元素2 { 樣式宣告 }

• 元素1和元素2中間用大於號隔開
• 元素1是父級，元素2是子級，最終選擇的是元素2
• 元素2必須是親兒子，其他一律不管

demo：

        ul>li {
            color: pink;
        }

    <ul>
        <li>親兒子1</li>
        <li>親兒子2</li>
        <li>親兒子3</li>
        <a href="#">
            <li>孫子1</li>
        </a>
    </ul>

效果：

4.並集選擇器
並集選擇器可以選擇多組標籤，同時為他們定義相同的樣式。
語法：

元素1,元素2 { 樣式宣告 }

• 元素1和元素2中間用英文狀態下的逗號隔開
• 逗號可以理解成和的意思
• 通常用於集體宣告
• 約定語法規範，並集選擇器豎著寫，最後一個選擇器不需要加逗號

demo：

    div,
    p,
    ul>li {
        color: red;
    }

<div>div標籤</div>
<p>p標籤</p>
<span>span標籤</span>
<ul class="ul">
    <li>li標籤1</li>
    <li>li標籤2</li>
    <li>li標籤3</li>
</ul>

效果：

5.偽類選擇器
偽類選擇器用於向某些選擇器新增特殊的效果，比如給連結新增特殊效果，或者選擇第n個元素。
偽類選擇器書寫的特點，用英文狀態下的冒號(:)表示，比如:hover、:first-child等。
偽類選擇器有連結偽類、結構偽類等。

6.連結偽類選擇器

標籤	說明
a:link	沒有點選過(訪問過)的連結
a:visited	點選過(訪問過)的連結
a:hover	滑鼠經過的那個連結
a:active	滑鼠正在按下還沒有彈起滑鼠的那個連結

• 為了確保生效，請按照LVHA的順序宣告a:link - a:visited - a:hover - a:active
• 因為a連結在瀏覽器中具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式

demo：

        a {
            color: #333;
            text-decoration: none;
        }

        /* 沒有點選過的連結 */
        a:link {
            color: red;
        }

        /* 點選過的連結 */
        a:visited {
            color: orange;
        }

        /* 滑鼠經過的那個連結 */
        a:hover {
            color: yellow;
        }

        a:active {
            color: green;
        }

    <a href="#">連結偽類選擇器</a>
    <a href="#">沒有點選過的連結偽類選擇器</a>
    <a href="https://www.baiud.comsss">未點選過</a>

效果：

6.:focus偽類選擇器
:focus偽類選擇器用於選取獲得焦點的表單元素
焦點就是游標，一般情況下<inout>類表單元素才能獲取，因此這個選擇器也主要針對於表單元素來說

demo：

        /* 將輸入框的背景色變成粉紅色，字型變成紅色 */
        :focus {
            background-color: pink;
            color: red;
        }

    <input type="text">
    <input type="text">
    <input type="text">

效果：

7.文章參考連結
a. https://www.boxuegu.com/