CSS複合選擇器是什麼?複合選擇器是如何工作

複合選擇器介紹

  • 複合選擇器其實很好理解,說白了就跟我們生活中的有血緣關係家庭成員一樣,通過標籤或者class屬性或id屬性,去找對應的有血緣關係的某個選擇器,具體的大家往下看哦。
  • 如果是初學者對基本的選擇器不是很了解的可以看筆者之前寫過的基本選擇器文章,,在這就不過多的介紹基本選擇器的使用了。

複合選擇器說明表

選擇器 描述 舉例
選擇器1 選擇器2{屬性:值;} 多元素選擇器。同時匹配選擇器1和選擇器2,多個選擇器之間用逗號隔開即可。 h1,h2,h3{color: red;}
E F {屬性:值;} 後代元素選擇器,匹配所有屬於E元素後代的F元素,E和F之間用空格隔開即可。 .box h1{color: red;}
E>F{屬性:值;} 子元素選擇器,匹配所有E元素的子元素為F div >h1{color:red;}
E+F{屬性:值;} 相鄰元素選擇器,匹配所有緊跟隨着E元素之後的同級元素F div+div{color:red;}

多元素選擇器

  • 多元素選擇器在工作當中經常會用到,主要用於設置多個元素使用同一種CSS樣式。
  • 讓我們進入多元素選擇器實踐,實踐內容如:將HTML頁面中的div標籤、h1標籤、p標籤、中的文本顏色設置為紅色。
  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多元素選擇器</title>
</head>
    <style>
        div,h1,p{
           color: red;
        }
    </style>
<body>
    <div>成功不是打敗別人,而是改變自己。</div>
    <h1>成功不是打敗別人,而是改變自己。</h1>
    <p>成功不是打敗別人,而是改變自己。</p>
</body>

</html>
  • 結果圖

  • 注意:作用給列表中的所有的選擇器設置樣式,class類選擇器或id選擇器也是一樣,在這裏就拿class類選擇器屬性值為.box為例,其餘的大家可以自己嘗試。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多元素選擇器</title>
</head>
    <style>
        .box,h1,p{
           color: red;
        }
    </style>
<body>
    <div class="box" >成功不是打敗別人,而是改變自己。</div>
    <h1>成功不是打敗別人,而是改變自己。</h1>
    <p>成功不是打敗別人,而是改變自己。</p>
</body>

</html>
  • 結果圖

後代元素選擇器

  • 讓我們進入後代元素選擇器實踐,實踐內容如:將class屬性值為.box的後代元素文本顏色設置為紅色,給大家介紹下結構:class屬性值為.box中一共有三個子元素,第一個h1標籤、第二個h1標籤、第三個div標籤、但是第三個子元素為div標籤裏面還有一個子元素為h1標籤或者我們可以理解為class屬性值為.box的孫子輩元素。
  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>後代元素選擇器</title>
</head>
    <style>
        .box h1{
           color: red;
        }
    </style>
<body>
    <div class="box" >
        <h1>成功不是打敗別人,而是改變自己。</h1>
        <h1>微笑是最初的信仰</h1>
        <div>
            <h1>成功不是打敗別人,而是改變自己。</h1>
        </div>
    </div>
    
</body>

</html>
  • 結果圖

  • 注意:後代選擇器只能包含在class屬性值為.box裏面的所有屬性。

子元素選擇器

  • 讓我們進入子元素選擇器實踐,實踐內容如:將class屬性值為.box的子元素文本顏色設置為紅色,給大家介紹下結構:class屬性值為.box中一共有三個子元素,第一個h1標籤、第二個h1標籤、div標籤、但是第三個子元素為div標籤裏面還有一個子元素為h1標籤或者我們可以理解為class屬性值為.box的孫子輩元素。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子元素選擇器</title>
</head>
    <style>
        .box > h1{
           color: red;
        }
    </style>
<body>
    <div class="box" >
        <h1>成功不是打敗別人,而是改變自己。</h1>
        <h1>微笑是最初的信仰</h1>
        <div>
            <h1>成功不是打敗別人,而是改變自己。</h1>
        </div>
    </div>

</body>

</html>
  • 結果圖

  • 注意:子元素選擇器和後代元素選擇器是不樣的,子元素選擇器是將class屬性值為.box中的子元素設置CSS樣式,後代元素選擇器是將class屬性值為.box中的所有元素設置CSS樣式,現在大家應該明白了,為什麼div標籤中的h1標籤文本顏色沒有被渲染的原因了吧,因為div標籤中的h1標籤是孫子輩。

相鄰元素選擇器

  • 相鄰元素選擇器必須滿足以下條件才會匹配。
  • E元素與F元素必須是兄弟關係,意思就是平輩關係。
  • E元素與F元素必須要緊挨着,就是之間不能有任何元素阻擋。
  • 要求F元素一定是在E元素的下面。
  • 讓我們進入相鄰元素選擇器實踐,實踐內容如:將HTML頁面中的class屬性值為.box的相鄰元素文本顏色設置為紅色。
  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相鄰元素選擇器</title>
</head>
    <style>
        .box + h1{
           color: red;
        }
    </style>
<body>
    <h1>我在上面學習</h1>
    <div class="box" >
        <h1>成功不是打敗別人,而是改變自己。</h1>
    </div>
    <h1>我在下面學習</h1>
</body>
</html>
  • 結果圖

  • 注意:大家一定要注意以上的2個必須和1個一定的規則,否則CSS樣式不會被渲染。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”

網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

小三通海運與一般國際貿易有何不同?

小三通快遞通關作業有哪些?

您可能也會喜歡…