溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

css后代選擇器如何使用

發(fā)布時(shí)間：2022-12-29 10:40:32 來(lái)源：億速云 閱讀：160 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹了css后代選擇器如何使用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css后代選擇器如何使用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

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

后代選擇器（descendant selector）又稱(chēng)為包含選擇器。

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

后代選擇器集中形式：

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

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

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

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

<!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;  //這里是選中類(lèi)a的所有后代
            }
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

第二種形式：

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

第三種形式:它并不可以同時(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>

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

<!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的基本語(yǔ)法是什么

css的基本語(yǔ)法是：

1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；

2、選擇器通常是需要改變樣式的HTML元素；

3、每條聲明由一個(gè)屬性和一個(gè)值組成；

4、屬性和屬性值被冒號(hào)分隔開(kāi)。

關(guān)于“css后代選擇器如何使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“css后代選擇器如何使用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手