首頁(yè)技術(shù)文章正文

CSS3子代選擇器和兄弟選擇器的用法

更新時(shí)間:2021年09月23日17時(shí)46分來(lái)源:傳智教育瀏覽次數(shù):

CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器，其中子代選擇器由符號(hào)“>”連接，兄弟選擇器由符號(hào)“+”和“～”連接，下面我們將詳細(xì)講解這兩種選擇器。

CSS3子代選擇器(>)

子代選擇器主要用來(lái)選擇某個(gè)元素的第一級(jí)子元素。例如希望選擇只作為h1元素子元素的strong元素，可以這樣寫(xiě)：h1> strong。

下面通過(guò)一個(gè)案例對(duì)子代選擇器(>)的用法進(jìn)行演示，如圖所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3子代選擇器用法-http://web.itheima.com</title>
    <style>
        h1 > strong {
            color: red;
            font-size: 20px;
            font-family: "微軟雅黑";
    　  }
    
    </style>
</head>
<body>
    <h1>這個(gè)<strong>知識(shí)點(diǎn)</strong>很<strong>重要</strong></h1>
　  <h1>傳智<em><strong>教育</strong></em>歡迎你！</h1>
</body>
</html>

在上述代碼中，第15行代碼中的strong元素為h1元素的子元素，第16行代碼中的strong元素為h1元素的孫元素，因此代碼中設(shè)置的樣式只對(duì)第15行代碼有效。

1632381562014_子代選擇器.jpg

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 + h2{
            color: green;
            font-family: "宋體";
            font-size: 20px;
       }

    </style>
</head>
<body>
　<body>
　  <h2>《贈(zèng)汪倫》</h2>
　  <p>李白乘舟將欲行，</p>
　  <h2>忽聞岸上踏歌聲。</h2>
　  <p>桃花潭水深千尺，</p>
　  <h2>不及汪倫送我情。</h2>
</body>
</html>

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

臨近兄弟選擇器

從圖中可以看出，只有緊跟p元素的h2元素應(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 ~ h2{
            color: pink;
            font-family: "微軟雅黑";
            font-size: 20px;
       }
    </style>
</head>
<body>
　<body>
    <h2>《贈(zèng)汪倫》</h2>
    <p>李白乘舟將欲行，</p>
    <h2>忽聞岸上踏歌聲。</h2>
    <h2>桃花潭水深千尺，</h2>
    <h2>不及汪倫送我情。</h2>
</body>
</html>