四種CSS 複合選擇器

ItDaChuang發表於2020-12-23
CSS

一、CSS 複合選擇器

  在 CSS 中，可以根據選擇器的型別把選擇器分為基礎選擇器和複合選擇器，複合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的。在四種CSS基礎選擇器中總結過 CSS 的基礎選擇器是由單個選擇器組成的。

  • 複合選擇器可以更準確、更高效的選擇目標元素(標籤)
  • 複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的
  • 常用的複合選擇器包括：後代選擇器、子選擇器、並集選擇器、偽類選擇器等等

一、後代選擇器

  後代選擇器又稱為包含選擇器，可以選擇父元素裡面子元素。其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。

  • 語法

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

    上面語法表示選擇元素1裡面的所有元素2（後代）。

  • 注意

    1.元素1 和 元素2 中間用空格隔開

    2.元素1 是父級，元素2 是子級，最終選擇的是元素2

    3.元素2 可以是兒子，也可以是孫子等，只要是元素1 的後代即可

    4.元素1 和 元素2 可以是任意基礎選擇器

    後代選擇器示例

二、子選擇器

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

  • 語法

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

  • 注意

    1.元素1和元素2中間用大於號隔開

    2.元素1 是父級，元素2 是子級，最終選擇的是元素2

    3.元素2 必須是親兒子，其孫子、重孫之類都不歸他管. 你也可以叫他親兒子選擇器

  • 示例

    <body>
    <div class="nav">
        <a href="#">我是兒子</a>
        <p>
            <a href="#">我是孫子</a>
        </p>
    </div>
</body>

    .nav a {        /* 後代選擇器 */
    color: red;
}
.nav>a {        /* 子選擇器 */
    text-decoration: none;
}
    後代選擇器與子選擇器示例

三、並集選擇器

  並集選擇器可以選擇多組標籤, 同時為他們定義相同的樣式。通常用於集體宣告。並集選擇器是各選擇器通過英文逗號（ , ）連線而成，任何形式的選擇器都可以作為並集選擇器的一部分。

  • 語法

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

    上述語法表示選擇元素1 和 元素2。

  • 注意

    1.元素1 和 元素2 中間用逗號隔開

    2.逗號可以理解為和的意思

    3.並集選擇器通常用於集體宣告

  • 示例

    <body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光頭強</span>
    <ul class="pig">
        <li>小豬佩奇</li>
        <li>豬豬俠</li>
    </ul>
</body>

    div,p,ul li{
    color: blue;
}
    並集選擇器示例

四、偽類選擇器

  偽類選擇器用於向某些選擇器新增特殊的效果，比如給連結新增特殊效果，或選擇第1個，第n個元素。偽類選擇器書寫最大的特點是用冒號( : )表示，比如 :hover（滑鼠經過時） 、 :first-child （選擇第一個孩子）。偽類選擇器有很多，比如有連結偽類、結構偽類等，這裡先總結常用的連結偽類選擇器。

  • 語法

    a: link			/* 選擇所有未被訪問的連結 */
a: visited	/* 選擇所有已經被訪問的連結 */
a: hover		/* 選擇滑鼠指標位於其上的連結 */
a: active		/* 選擇活動連結（滑鼠按下但未彈起的連結） */

  • 注意

    1.為了確保生效，請按照 LVHA 的循順序宣告：link–visited–hover–active。順序顛倒可能會失效。

    2.因為 a 連結在瀏覽器中具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式。

    3.實際工作中，只需要寫一個連結的狀態和滑鼠經過的狀態。

  • 示例

    <body>
    <a href="#">打工人</a><br />
    <a href="#">努力做個技術人</a>
</body>

    a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color:blue;
    text-decoration: underline;
}
    偽類選擇器示例

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

  • 語法

    input:focus {
	background-color: yellow;
}

  • 示例

    <body>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text">
</body>

    input:focus {
    background-color: red;
}
    偽類選擇器示例

五、複合選擇器總結

選擇器作用特徵使用情況隔開符號
後代選擇器選擇後代元素子孫後代都可以較多空格 .nav a
子代選擇器選擇最近一級子元素只選親兒子較少大於號 .nav>p
並集選擇器選擇多個元素用於集體宣告較多逗號 .nav,p,a
連結偽類選擇器選擇不同狀態的連結跟連結相關較多冒號 a:hover
:focus 選擇器選擇獲得游標的表單跟表單相關較少冒號 input:focus

相關文章