Maison > Article > interface Web > Sélectionnez les éléments frères à l'aide de CSS

Sélectionnez les éléments frères à l'aide de CSS

WBOYavant: 2023-09-13 09:53:051241parcourir

Si nous voulons faire correspondre les éléments qui apparaissent immédiatement après le premier sélecteur, nous pouvons utiliser le sélecteur frère adjacent (+). Ici, les deux sélecteurs sont des enfants du même élément parent.

La syntaxe du combinateur de frères et sœurs adjacents CSS est la suivante :

Selector + Selector{
   attribute: /*value*/
}

Si nous voulons sélectionner des éléments frères sous le même élément parent, quelle que soit la position du deuxième élément sélectionné, nous pouvons utiliser le sélecteur de frères et sœurs universel CSS.

La syntaxe du sélecteur de frères et sœurs universel CSS est la suivante :

Selector ~ Selector{
   attribute: /*value*/
}

L'exemple suivant montre les propriétés du sélecteur de frères et sœurs CSS adjacent et générique.

Exemple

Démonstration

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   display: flex;
   margin: 2%;
   padding: 2%;
   box-shadow: inset 0 0 24px cyan;
   justify-content: space-around;
}
div + p {
   font-size: 1.2em;
   font-weight: bold;
   background: powderblue;
}
section {
   box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Check this</p>
<section><p>Some text in section</p></section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>

Sortie

Cela produira les résultats suivants -

使用 CSS 选择同级元素

Exemple

Démonstration en direct

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   display: flex;
   margin: 2%;
   padding: 2%;
   background: thistle;
   justify-content: space-between;
}
section ~ p {
   text-align: center;
   font-size: 1.2em;
   font-weight: bold;
   background: lavender;
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Random text 1</p>
<section><p>Some text in section</p></section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" />
</div>
</body>
</html>

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!

css 选择器

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Conseils pour ajuster la hauteur des lignes en fonction de la taille de l'écran à l'aide des unités CSS Viewport vmin et vmaxArticle suivant：Conseils pour ajuster la hauteur des lignes en fonction de la taille de l'écran à l'aide des unités CSS Viewport vmin et vmax

Articles Liés

Voir plus