后代選擇器（CSS選擇器）

本文轉載自查看原文 2019-09-09 21:55 609 css

后代選擇器集中形式：

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

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

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

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

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

第二種形式：

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

第三種形式:它並不可以同時選中 .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>

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

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css-交集選擇器、后代選擇器 CSS的子選擇器與后代選擇器的區別 CSS之后代選擇器與多類選擇器 Css 后代選擇器與子代選擇器的區別 css——子代與后代選擇器 css 后代選擇器多級嵌套 css樣式,后代選擇器 CSS后代選擇器,子選擇器和相鄰兄弟選擇器 CSS系列之后代選擇器、子選擇器和相鄰兄弟選擇器 CSS選擇器（通配符選擇器、標簽選擇器、類選擇器、id選擇器、群組選擇器、后代選擇器、子元素選擇器和相鄰元素選擇器）