recherche

Maison  >  Article  >  interface Web  >  Guide des propriétés du sélecteur de proximité CSS : + et ~

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

PHPz
PHPzoriginal
2023-10-20 18:24:201035parcourir

CSS 邻近选择器属性指南：+ 和 ~

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

Le sélecteur de proximité CSS est une propriété utilisée pour sélectionner des éléments adjacents, notamment + et ~.

+ le sélecteur est utilisé pour sélectionner le premier élément adjacent immédiatement après l'élément spécifié. Dans la structure HTML, deux éléments frères du même élément parent sont appelés éléments adjacents.

~Le sélecteur est utilisé pour sélectionner tous les éléments adjacents après l'élément spécifié.

Utilisez ces propriétés de sélecteur de proximité pour contrôler de manière flexible le style entre les éléments de la page. Ci-dessous, nous démontrerons l'utilisation des sélecteurs + et ~ à travers des exemples de code spécifiques.

Tout d'abord, nous allons créer un simple document HTML contenant une série d'éléments dc6dce4a544fdca2df29d5ac0ea9906b adjacents : 

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-color: gray;
        }
        .box:hover {
            background-color: red;
        }
        .box + .box {
            background-color: blue;
        }
        .box ~ .box {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

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!

css html 选择器 伪类
Déclaration：
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
Article précédent：Explication détaillée des propriétés de l'image transparente CSS : opacité et image d'arrière-planArticle suivant：Explication détaillée des propriétés de l'image transparente CSS : opacité et image d'arrière-plan

Articles Liés

Voir plus