首頁技術文章正文

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

更新時間:2021年09月23日17時46分來源:傳智教育瀏覽次數:

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

CSS3子代選擇器(>)

子代選擇器主要用來選擇某個元素的第一級子元素。例如希望選擇只作為h1元素子元素的strong元素，可以這樣寫：h1> strong。

下面通過一個案例對子代選擇器(>)的用法進行演示，如圖所示：

<!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>這個<strong>知識點</strong>很<strong>重要</strong></h1>
　  <h1>傳智<em><strong>教育</strong></em>歡迎你！</h1>
</body>
</html>

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

1632381562014_子代選擇器.jpg

CSS3兄弟選擇器(+、～)

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

1. 臨近兄弟選擇器

該選擇器使用加號“+”來鏈接前后兩個選擇器。選擇器中的兩個元素有同一個父親，而且第二個元素必須緊跟第一個元素。

下面通過一個案例對臨近兄弟選擇器的用法進行演示。

<!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>《贈汪倫》</h2>
　  <p>李白乘舟將欲行，</p>
　  <h2>忽聞岸上踏歌聲。</h2>
　  <p>桃花潭水深千尺，</p>
　  <h2>不及汪倫送我情。</h2>
</body>
</html>

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

臨近兄弟選擇器

從圖中可以看出，只有緊跟p元素的h2元素應用了代碼中設定的樣式。

2.普通兄弟選擇器

普通兄弟選擇器使用“～”來鏈接前后兩個選擇器。查找某一個指定元素的后面的所有兄弟結點。

下面通過一個案例對普通兄弟選擇器的用法進行演示，如下所示。

<!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>《贈汪倫》</h2>
    <p>李白乘舟將欲行，</p>
    <h2>忽聞岸上踏歌聲。</h2>
    <h2>桃花潭水深千尺，</h2>
    <h2>不及汪倫送我情。</h2>
</body>
</html>