css有哪些后代選擇器

本篇內(nèi)容主要講解“css有哪些后代選擇器”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css有哪些后代選擇器”吧!

成都創(chuàng)新互聯(lián)是一家專業(yè)提供觀山湖企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站建設(shè)、H5場景定制、小程序制作等業(yè)務(wù)。10年已為觀山湖眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

css后代選擇器有：1、“父代元素 * {}”，從父代元素中的找到所有子代元素。2、“父代子代{}”，是從父代元素中找到指定子代元素；3、“父代子代1 子代2{}”，從父代中找到子代1，再從子代1找到子代2。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

后代選擇器（descendant selector）又稱為包含選擇器。

后代選擇器可以選擇作為某元素后代的元素。

后代選擇器集中形式：

1、父代 * {}從父代中的找到所有子代。

2、父代子代1{} 是從父代中找到子代1 或者 父代子代2{} 是從父代中找到子代2 。

3、父代子代1 子代2{} 這個(gè)是從父代中找到子代1，再從子代1 找到子代2。

第一種形式：雖然是全部選中但是*的優(yōu)先級較低。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                padding: 20px;
                background: rgba(255,0,0,0.2);     //這是給它一個(gè)紅色，透明度為0.2
            } 
        .a *{
                border: 2px solid black;  //這里是選中類a的所有后代
            }
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

css有哪些后代選擇器

第二種形式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
        .a .b{
                border: 2px solid black; //同理這里選擇 .c 也是可以的因?yàn)樗麄兌际?nbsp;.a 的后代。
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

css有哪些后代選擇器

第三種形式:它并不可以同時(shí)選中 .b 和 .c，只能選中.c.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
            .a .b .c{
                border: 2px solid black;
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

css有哪些后代選擇器

還有一點(diǎn)需要注意如下代碼：在類名為c的p中嵌套了一個(gè)p 中再嵌套了一個(gè)類名為c的p，這時(shí)同樣會被選中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
            .a .b .c{
                border: 2px solid black;
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c
                <div>
                    <div class="c">span</div>
                </div>
                </div>
            </div>
        </div>
    </body>
</html>

到此，相信大家對“css有哪些后代選擇器”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文標(biāo)題：css有哪些后代選擇器
分享鏈接：http://jinyejixie.com/article16/pgeddg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、微信公眾號、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、網(wǎng)頁設(shè)計(jì)公司、App開發(fā)

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css有哪些后代選擇器