溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS3兄弟選擇器怎么用

發(fā)布時(shí)間：2022-03-22 11:03:59 來(lái)源：億速云 閱讀：709 作者：小新 欄目：web開發(fā)

這篇文章主要介紹CSS3兄弟選擇器怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

css3中兄弟選擇器的語(yǔ)法：1、“+”兄弟選擇器，語(yǔ)法為“指定元素+選擇元素{css代碼}”，該選擇器表示選擇某元素后相鄰的兄弟元素；2、“～”兄弟選擇器，語(yǔ)法為“指定元素～選擇元素{css代碼}”，該選擇器表示某元素后所有同級(jí)的指定元素。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS3兄弟選擇器的語(yǔ)法是什么

CSS3兄弟選擇器(+、～)

兄弟選擇器用來(lái)選擇與某元素位于同一個(gè)父元素之中，且位于該元素之后的兄弟元素。兄弟選擇器分為臨近兄弟選擇器和普通兄弟選擇器兩種。對(duì)它們的講解如下。

1. 臨近兄弟選擇器

該選擇器使用加號(hào)“+”來(lái)鏈接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親，而且第二個(gè)元素必須緊跟第一個(gè)元素。

下面通過(guò)一個(gè)案例對(duì)臨近兄弟選擇器的用法進(jìn)行演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3緊鄰兄弟選擇器用法-http://web.itheima.com</title>
    <style type="text/css">
        p + h3{
            color: green;
            font-family: "宋體";
            font-size: 20px;
       }
    </style>
</head>
<body>
　<body>
　  <h3>《贈(zèng)汪倫》</h3>
　  <p>李白乘舟將欲行，</p>
　  <h3>忽聞岸上踏歌聲。</h3>
　  <p>桃花潭水深千尺，</p>
　  <h3>不及汪倫送我情。</h3>
</body>
</html>

在上述代碼中，第7～11行代碼用于為p元素后緊鄰的第一個(gè)兄弟元素h3定義樣式。從結(jié)構(gòu)中看出p元素后緊鄰的第一個(gè)兄弟元素所在位置為第17行代碼，因此第17行代碼的文字內(nèi)容將以所定義好的樣式顯示。

CSS3兄弟選擇器怎么用

從圖中可以看出，只有緊跟p元素的h3元素應(yīng)用了代碼中設(shè)定的樣式。

2.普通兄弟選擇器

普通兄弟選擇器使用“～”來(lái)鏈接前后兩個(gè)選擇器。查找某一個(gè)指定元素的后面的所有兄弟結(jié)點(diǎn)。

下面通過(guò)一個(gè)案例對(duì)普通兄弟選擇器的用法進(jìn)行演示，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3普通兄弟選擇器~用法-http://web.itheima.com</title>
    <style type="text/css">
        p ~ h3{
            color: pink;
            font-family: "微軟雅黑";
            font-size: 20px;
       }
    </style>
</head>
<body>
　<body>
    <h3>《贈(zèng)汪倫》</h3>
    <p>李白乘舟將欲行，</p>
    <h3>忽聞岸上踏歌聲。</h3>
    <h3>桃花潭水深千尺，</h3>
    <h3>不及汪倫送我情。</h3>
</body>
</html>

CSS3兄弟選擇器怎么用

從圖中可以看出，p元素后面的所有兄弟元素h3都應(yīng)用了代碼中所設(shè)定的樣式。

以上是“CSS3兄弟選擇器怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手