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*/
}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*/
}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>Cela produira les résultats suivants -
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>Cela produira les résultats suivants -
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!
Comment ouvrir un fichier zip
Quelle interface est audio ?
Introduction aux raisons pour lesquelles le bureau à distance ne peut pas se connecter
Pendant combien d'années faut-il payer une assurance maladie pour bénéficier d'une assurance médicale à vie ?
Qu'est-ce que Spring MVC
odm
Où est la lampe de poche du téléphone OnePlus ?
Utilisation de la commande source sous Linux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
