Guide des propriétés du sélecteur de proximité CSS : + et ~

Dans le code ci-dessus, nous définissons d'abord une classe CSS nommée box, qui définit la largeur, la hauteur, la marge inférieure et la couleur d'arrière-plan. Lorsque la souris survole l'élément box, nous définissons également la pseudo-classe :hover, qui est utilisée pour changer la couleur d'arrière-plan en rouge.

Ensuite, nous utilisons le sélecteur + pour définir la couleur d'arrière-plan du premier élément adjacent comme étant bleue. Cela signifie que la couleur d’arrière-plan du deuxième élément box après le premier élément box deviendra bleue.

Ensuite, nous utilisons le sélecteur ~ pour définir la couleur d'arrière-plan de tous les éléments adjacents après le premier élément de la boîte comme étant verte. Cela signifie que la couleur d'arrière-plan des deuxième, troisième et quatrième éléments de la boîte après le premier élément de la boîte deviendra verte.

Enregistrez et exécutez le code ci-dessus, nous verrons que l'élément box dans la page est rendu selon le style que nous avons défini. Lorsque la souris survole l'élément boîte, sa couleur d'arrière-plan passe au rouge. La couleur d'arrière-plan du deuxième élément de boîte qui suit immédiatement le premier élément de boîte passera au bleu, tandis que la couleur d'arrière-plan des autres éléments de boîte passera au vert.

Il s'agit d'un exemple d'utilisation de base utilisant les attributs du sélecteur de proximité + et ~. Vous pouvez l'utiliser de manière flexible en fonction de vos besoins spécifiques et de la structure des pages pour obtenir des effets et des mises en page plus diversifiés.

Pour résumer, la propriété CSS de sélection de proximité offre un moyen pratique de sélectionner et de styliser les éléments HTML adjacents. En utilisant le sélecteur +, nous pouvons sélectionner le premier élément adjacent immédiatement après l'élément spécifié ; en utilisant le sélecteur ~, nous pouvons sélectionner tous les éléments adjacents après l'élément spécifié. Ces propriétés de sélecteur offrent un contrôle plus fin, nous permettant de créer des effets de mise en page et de style plus complexes et plus riches.

J'espère que cet article vous aidera à comprendre et à appliquer les propriétés du sélecteur de proximité CSS. Si vous avez des questions, laissez un message pour en discuter !

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!