CSS中的層級選擇器如何使用

這篇文章主要介紹“CSS中的層級選擇器如何使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS中的層級選擇器如何使用”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作與策劃設(shè)計,祁陽網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:祁陽等地區(qū)。祁陽做網(wǎng)站價格咨詢:028-86922220

CSS中的層級選擇器如何使用

層級選擇器

CSS層級選擇器是根據(jù)HTML節(jié)點樹之間的關(guān)系提供的選擇器用法，所以說如果想要很好的學(xué)習(xí)層級選擇器首先要搞清楚HMTL元素之間的關(guān)系是什么樣子的。

先看下面這段HTML代碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML測試代碼</title>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <span></span>
        <button></button>
        <span></span>
    </div>
</body>

</html>

將如上代碼可以畫成如下節(jié)點樹，如下圖所示

CSS中的層級選擇器如何使用

現(xiàn)在來我們看一個HTML元素之間的關(guān)系，在HTML頁面中元素之間的關(guān)系存在著如下所示的三種關(guān)系：

  • 父級與子級之間的關(guān)系：在上述代碼中，左邊<div>元素是<p>元素的的父級元素，反之<p>是<div> 的子級元素，當(dāng)然這種父子結(jié)構(gòu)還有跟多。

  • 兄弟之間的關(guān)系：在上述代碼代碼中，<p>元素和<p>元素是兄弟元素，<span>元素和<button> 元素也是兄弟元素。

  • 祖先與后代之間的關(guān)系：在上述代碼代碼中，<p>元素是<body>元素的后代元素，反之<body>元素是<p>元素的祖先元素。

層級選擇器種類

根據(jù)HTML元素之間的3種關(guān)系，CSS的層級選擇器提供了如下4種用法：

  • 后代選擇器：將某個元素當(dāng)做祖先元素，定位該元素的所有后代元素。

  • 子級選擇器：將某個元素當(dāng)做父級元素，定位該元素的所有子級元素。

  • 相鄰兄弟選擇器：將某個元素作為目標(biāo)元素，定位與該目標(biāo)元素?fù)碛型粋€父級元素的下一個指定元素

  • 普通兄弟選擇器：是將某個元素作為目標(biāo)元素，定位與該目標(biāo)元素?fù)碛型粋€父級元素的之后任意指定元素。

選擇符

CSS提供的4個選擇符，對應(yīng)著CSS層級選擇題的四種用法，如下所示

  • 表示后代關(guān)系的空格（ ）

  • 表示父子關(guān)系的尖括號（>）

  • 表示相鄰兄弟關(guān)系的加號（+）

  • 表示兄弟關(guān)系的波浪號（~）

在Web開發(fā)中，用的較多的是前兩個-后代選擇器和子選擇器。

我們先來看一段代碼：

<!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>使用CSS3層次選擇器</title>
            <style type="text/css">
              * {margin:0;padding:0;}
              body {width: 300px; margin:0 auto;}
              div{margin:5px;padding:5px;border:1px solid #ccc;}
            </style>
          </head>
          <body>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4
              <div>5</div>
              <div>6</div>
            </div>
            <div>7
              <div>8
                <div>9
                  <div>10</div>
                </div>
              </div>
            </div>
          </body>
        </html>

CSS中的層級選擇器如何使用

后代選擇器

用來選擇某個元素的所有的后代元素，比如上面的html中，使用如下的樣式，會產(chǎn)生什么效果呢？

body div { background-color: yellow; }

這里將body元素的后代div元素設(shè)置背景色為yellow。也就是說，所有的div都被染上了黃色。

CSS中的層級選擇器如何使用

子選擇器

用于選擇某個元素下（可能是多個元素）所有的一級子元素。比如，我們使用下面的選擇器及樣式，會有什么效果呢？

body > div { background-color: red; }

這樣設(shè)置后，body下的一級div元素，這里是內(nèi)容為1、2、3、4、7的div元素設(shè)置背景色為紅色。

CSS中的層級選擇器如何使用

相鄰兄弟選擇器

用于選取某個（或某些）元素同級目錄下的下一個元素。比如，這里我們使用下面樣式設(shè)置后的效果是什么樣的呢？

.active + div { background-color: green; }

這里我們設(shè)置了.active選擇器的相鄰兄弟節(jié)點，也就是第二個div元素，將其背景色設(shè)置為了綠色。

CSS中的層級選擇器如何使用

通用兄弟選擇器

用于選取某個（或某些）元素的同級目錄下所有的后面的標(biāo)記。它和相鄰兄弟選擇器類似，需要在同一個父元素中。

比如使用下面的代碼，影響到的樣式：

.active ~ div { background-color: pink; }

這里將類名為"active"的元素（這里為第一個div）的通用兄弟（這里是內(nèi)容為2、3、4、7的div）設(shè)置了背景色為粉紅色。

CSS中的層級選擇器如何使用

關(guān)于“CSS中的層級選擇器如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

網(wǎng)頁題目：CSS中的層級選擇器如何使用
轉(zhuǎn)載來于：http://bm7419.com/article30/gocgso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、微信公眾號、服務(wù)器托管、網(wǎng)頁設(shè)計公司、域名注冊、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)