Comment utiliser CSS parent-enfant

Lorsque nous travaillons sur un projet front-end, nous devons clarifier la relation parent entre les modules d'éléments, afin que nous puissions maintenir, trouver et utiliser les éléments plus facilement. Permettez-moi de vous faire une bonne introduction aujourd'hui.

Pour faire simple, CSS parent et CSS enfant sont des termes relatifs. Par exemple, un DIV "A" est enveloppé par un autre DIV "B", on peut donc penser que B est le parent de A. Le la même raison s'applique.

Parent-enfant ou parfois la relation imbriquée DIV est comparée à la relation père-fils. Ceci pour faciliter la compréhension. L'image de la relation imbriquée DIV est comparée à la relation parent-enfant.

, exemple :

Exemple de description parent-enfant CSS DIV :

Code CSS

.yangshi{...} 
.yangshi .yangshi_a{ ...} 
.yangshi .yangshi_b{ ...}

Code Div

<div class="yangshi"> 
<div class="yangshi_a">内容a</div> 
<div class="yangshi_b">内容b</div> 
</div>

Dans le code div+css ci-dessus, on peut penser que le parent (niveau supérieur) de yangshi_a est yangshi.

De cette façon, nous pouvons utiliser l'attribut pointeur CSS dans le div CSS, et le style CSS final peut avoir le même nom sélecteur d'attribut , Mais étant donné des valeurs différentes.

De cette façon, nous pouvons savoir que le parent de yangshi_a est yangshi en regardant .yangshi .yangshi_a

Je crois que vous maîtrisez la méthode après en lisant ces cas. Pour un contenu plus passionnant, veuillez prêter attention au site Web chinois php et aux autres articles connexes !

Lecture connexe :

Comment utiliser l'attribut de dégradé de transformation en CSS3

Étapes pour implémenter l'effet de création de dynamique commutateurs en Css3

Étapes pour optimiser les formulaires HTML5 avec CSS3

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!