css語言中怎么使用后代選擇器

發(fā)布時間：2022-01-20 13:37:32 來源：億速云閱讀：190 作者：清風(fēng) 欄目：web開發(fā)

本文將為大家詳細介紹“css語言中怎么使用后代選擇器”，內(nèi)容步驟清晰詳細，細節(jié)處理妥當(dāng)，而小編每天都會更新不同的知識點，希望這篇“css語言中怎么使用后代選擇器”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

在css中，后代選擇器用來選擇特定元素或元素組的所有指定后代元素，需要將對父元素的選擇放在前面，對子元素的選擇放在后面，中間加一個空格分開，語法為“父元素子元素{css樣式}”。

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

后代選擇器也稱包含選擇器，用來選擇特定元素或元素組的后代，將對父元素的選擇放在前面，對子元素的選擇放在后面，中間加一個空格分開。

后代選擇器集中形式：

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

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

3、父代子代1 子代2{} 這個是從父代中找到子代1，再從子代1 找到子代2.

后代選擇器中的元素不僅僅只能有兩個，對于多層祖先后代關(guān)系，可以有多個空格加以分開，如id為a、b、c的三個元素，則后代選擇器可以寫成#a #b #c{}的形式，只要對祖先元素的選擇在后代元素之前、中間以空格分開即可。

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                padding: 20px;
                background: rgba(255,0,0,0.2);     //這是給它一個紅色，透明度為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 也是可以的因為他們都是 .a 的后代。
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

css語言中怎么使用后代選擇器

第三種形式:它并不可以同時選中 .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語言中怎么使用后代選擇器

還有一點需要注意如下代碼：在類名為c的p中嵌套了一個p 中再嵌套了一個類名為c的p，這時同樣會被選中

<!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的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

感謝您能讀到這里，小編希望您對“css語言中怎么使用后代選擇器”這一關(guān)鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

css語言中怎么使用后代選擇器

css的全稱是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽