Quels sont les sélecteurs de descendants CSS ?-Questions et réponses frontales-php.cn

Quels sont les sélecteurs de descendants CSS ?

青灯夜游

Libérer： 2023-01-07 11:42:12

original

4170 Les gens l'ont consulté

Les sélecteurs descendants CSS sont : 1. "Élément parent * {}", recherchez tous les éléments descendants de l'élément parent. 2. "Parent Children {}" consiste à rechercher l'élément enfant spécifié à partir de l'élément parent ; 3. "Parent Child 1 Child 2 {}" consiste à rechercher l'enfant 1 à partir du parent, puis à partir de l'enfant, la génération 1 trouve le descendant. 2.

Quels sont les sélecteurs de descendants CSS ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Le sélecteur descendant est également appelé sélecteur conteneur.

Le sélecteur de descendants peut sélectionner des éléments qui sont les descendants d'un élément.

Forme concentrée du sélecteur de descendants :

1. Parent* {} Rechercher tous les descendants du parent. 父代 * {}从父代中的找到所有子代。

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

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

2. Parent Enfant 1{} doit trouver l'enfant 1 du parent ou Parent Enfant 2{} doit trouver l'enfant du parent 2.

3. Parent Enfant 1 Enfant 2{} Il s'agit de trouver l'enfant 1 du parent, puis de trouver l'enfant 2 de l'enfant 1.

Le premier formulaire : Bien que tous soient sélectionnés, * a une priorité inférieure.

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

Copier après la connexion

Deuxième forme :

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

Copier après la connexion

Troisième forme : Il ne peut pas sélectionner .b et .c en même temps, seulement .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>

Copier après la connexion

Il y a un autre point qui doit être noté dans le code suivant : il y a un p imbriqué dans un p avec un nom de classe c, et un p avec un nom de classe c y est imbriqué à ce moment-là, il le sera également. sélectionné

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

Copier après la connexion

(Partage de vidéos d'apprentissage : 🎜Tutoriel vidéo CSS🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!