CSS複合選擇器是什麼？複合選擇器是如何工做

時間  2019-11-20
標籤 css 複合 選擇器 什麼 如何 欄目 CSS 简体版
原文   原文鏈接

複合選擇器介紹

  • 複合選擇器其實很好理解，說白了就跟咱們生活中的有血緣關係家庭成員同樣，經過標籤或者class屬性或id屬性，去找對應的有血緣關係的某個選擇器，具體的你們往下看哦。
  • 若是是初學者對基本的選擇器不是很瞭解的能夠看筆者以前寫過的基本選擇器文章，CSS基本選擇器是什麼？基本選擇器是如何工做，在這就不過多的介紹基本選擇器的使用了。

複合選擇器說明表

選擇器 描述 舉例
選擇器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標籤、中的文本顏色設置爲紅色。

  • 代碼塊html

<!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爲例，其他的你們能夠本身嘗試。ui

  • 代碼塊code

<!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>

  • 結果圖htm

後代元素選擇器

  • 讓咱們進入後代元素選擇器實踐，實踐內容如：將class屬性值爲.box的後代元素文本顏色設置爲紅色，給你們介紹下結構：class屬性值爲.box中一共有三個子元素，第一個h1標籤、第二個h1標籤、第三個div標籤、可是第三個子元素爲div標籤裏面還有一個子元素爲h1標籤或者咱們能夠理解爲class屬性值爲.box的孫子輩元素。

  • 代碼塊blog

<!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>

  • 結果圖get

  • 注意：後代選擇器只能包含在class屬性值爲.box裏面的全部屬性。it

子元素選擇器

  • 讓咱們進入子元素選擇器實踐，實踐內容如：將class屬性值爲.box的子元素文本顏色設置爲紅色，給你們介紹下結構：class屬性值爲.box中一共有三個子元素，第一個h1標籤、第二個h1標籤、div標籤、可是第三個子元素爲div標籤裏面還有一個子元素爲h1標籤或者咱們能夠理解爲class屬性值爲.box的孫子輩元素。table

  • 代碼塊class

<!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樣式不會被渲染。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程