Was sind die CSS-Nachkommenselektoren?-Front-End-Fragen und Antworten-php.cn

Was sind die CSS-Nachkommenselektoren?

青灯夜游

Freigeben： 2023-01-07 11:42:12

Original

4231 Leute haben es durchsucht

CSS-Nachkommenselektoren sind: 1. „Übergeordnetes Element * {}“, alle Nachkommenelemente des übergeordneten Elements finden. 2. „Parent Children {}“ dient dazu, das angegebene untergeordnete Element vom übergeordneten Element zu finden. 3. „Parent Child 1 Child 2 {}“ dient dazu, das untergeordnete Element 1 vom übergeordneten Element zu finden und dann von der untergeordneten Generation 1 Nachkommen zu finden 2.

Was sind die CSS-Nachkommenselektoren?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Der Nachkommenselektor wird auch als enthaltender Selektor bezeichnet.

Der Nachkommenselektor kann Elemente auswählen, die Nachkommen eines Elements sind.

Konzentrierte Form des Nachkommenselektors:

1 Parent* {} Alle Nachkommen des übergeordneten Elements finden. 父代 * {}从父代中的找到所有子代。

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

3、父代子代1 子代2{}

2. Parent Child 1{} soll Kind 1 vom Elternteil finden oder Parent Child 2{} soll das Kind vom Elternteil 2 finden.

3. Parent Child 1 Child 2{} Dies dient dazu, Child 1 von Parent und dann Child 2 von Child 1 zu finden.

Das erste Formular: Obwohl alle ausgewählt sind, hat * eine niedrigere Priorität.

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

Nach dem Login kopieren

Zweite Form:

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

Nach dem Login kopieren

Dritte Form: .b und .c können nicht gleichzeitig ausgewählt werden, sondern nur .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>

Nach dem Login kopieren

Im folgenden Code muss noch ein weiterer Punkt beachtet werden: In einem p ist ein p mit dem Klassennamen c verschachtelt, und zu diesem Zeitpunkt ist auch ein p mit dem Klassennamen c verschachtelt ausgewählt

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

Nach dem Login kopieren

(Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Nachkommenselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!