communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Sélectionnez les éléments enfants à l'aide de CSS

Sélectionnez les éléments enfants à l'aide de CSS

王林
Libérer： 2023-08-31 19:53:03
avant
1247 Les gens l'ont consulté

Le combinateur enfant CSS est utilisé pour sélectionner tous les éléments enfants d'un élément parent. La syntaxe du combinateur enfant

CSS est la suivante - 

Selector > Selector {
   attribute: /*value*/
}
Copier après la connexion

Le combinateur descendant CSS est utilisé pour sélectionner tous les éléments descendants de l'élément parent.

La syntaxe du combinateur descendant CSS est la suivante : 

Selector Selector {
   attribute: /*value*/
}
Copier après la connexion

Exemple

L'exemple suivant montre les sélecteurs enfants et descendants CSS.

Démonstration en ligne

<!DOCTYPE html>
<html>
<head>
<style>
article > * {
   text-align: center;
   border: 10px groove tomato;
}
::first-line {
   box-shadow: inset 0 0 7px cornflowerblue;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum. </h2>
<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>
<img src="https://images.unsplash.com/photo-1612840666989- a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" />
</article>
</body>
</html>
Copier après la connexion

Sortie

Cela produira les résultats suivants -

使用 CSS 选择子元素

Exemple

Démonstration en direct

<!DOCTYPE html>
<html>
<head>
<style>
body > * {
   margin: 20px;
}
article p {
   font-size: 24px;
   box-shadow: -10px 1px 0 rgba(12,43,180, 0.6);
}
</style>
</head>
<body>
<article>
<p>Neque porro quisquam </p>
<p>est qui dolorem ipsum quia dolor sit amet,</p>
<div><p>consectetur, adipisci velit.....</p></div>
</article>
<div>
<p> consectetur, adipisci velit</p>
<article>
<p> consectetur, adipisci velit</p>
</article>
</div>
</body>
</html>
Copier après la connexion

Sortie

Cela produira les résultats suivants -

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

source：tutorialspoint.com
Article précédent：La fonction de l'attribut size en CSS est de définir la taille et la direction de la zone de page. Article suivant：Propriété de média vocal CSS à plage vocale
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2064
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2223
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1872
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1753
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1785
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal