Maison > Article > interface Web > Comment masquer les éléments parents et afficher les éléments enfants en CSS
Comment masquer les éléments parents et afficher les éléments enfants en CSS
- WBOYoriginal
- 2021-11-24 16:33:382951parcourir
En CSS, vous pouvez utiliser l'attribut de visibilité pour masquer l'élément parent et afficher l'élément enfant. Il vous suffit d'ajouter le style "visibilité: caché" à l'élément parent et le style "visibilité: visible" à l'élément enfant. .
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment masquer l'élément parent et afficher l'élément enfant en CSS
Il est très simple de masquer l'élément parent et d'afficher l'élément enfant en CSS. Il vous suffit d'ajouter le style visibilité: caché au fichier. élément parent pour le masquer, puis ajoutez le style visibilité:hidden à l'élément enfant Ajoutez simplement le style visibilité:visible pour le faire apparaître.
Jetons un coup d'œil à un exemple. L'exemple est le suivant :
<!DOCTYPE html> <html> <head> </head> <body> <div style="height:50px;width:300px;border:1px solid black;background-color:yellow;"> <p>1231231231231325654654635165</p> </div> </body> </html>
Résultat de sortie :
Après avoir ajouté des styles à l'élément parent et aux éléments enfants :
<!DOCTYPE html>
<html>
<head>
<style>
div{
visibility:hidden;
}
p{
visibility:visible;
}
</style>
</head>
<body>
<div style="height:50px;width:300px;border:1px solid black;background-color:yellow;">
<p>1231231231231325654654635165</p>
</div>
</body>
</html>Résultat de sortie :
L'exemple ci-dessus est L'élément parent masque l'affichage des éléments enfants.
(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!