Sélectionnez les éléments frères à l'aide de CSS-tutoriel CSS-php.cn

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

WBOY

Libérer： 2023-09-13 09:53:05

avant

1276 Les gens l'ont consulté

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*/
}

Copier après la connexion

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*/
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion