Maison > Article > interface Web > Qu'est-ce que le sélecteur CSS "+" ?

Qu'est-ce que le sélecteur CSS "+" ?

青灯夜游original: 2022-11-24 20:41:282631parcourir

En CSS, "+" est le sélecteur d'élément frère adjacent, utilisé pour sélectionner des éléments immédiatement après un autre élément, et ils ont le même élément parent, en d'autres termes, les deux éléments E et F ont le même élément parent, et l'élément F est derrière et adjacent à l'élément E, de sorte que le sélecteur d'élément frère adjacent puisse être utilisé pour sélectionner l'élément F, la syntaxe est "E + F".

Qu'est-ce que le sélecteur CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Sélecteur d'éléments frères et sœurs adjacents (E + F)

Le sélecteur d'éléments frères et sœurs adjacents peut sélectionner des éléments immédiatement après un autre élément, et ils ont le même élément parent, en d'autres termes, EF deux éléments ont le même élément parent et le F L'élément est derrière l'élément E et adjacent, nous pouvons donc utiliser le sélecteur d'élément frère adjacent pour sélectionner l'élément F.

Il y a 2 informations clés ici : (1) immédiatement après un autre élément ; (2) les deux ont le même élément parent

Exemple ① :

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        div+p{
            background-color: aqua;
        }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
      <div>
          <p>第零个段落</p>
          <div>
              <p>第一个段落</p>
          </div>
      </div>
      <p>第二个段落</p>
      <p>第三个段落</p>
      <p>第四个段落</p>
    </body>
</html>

div +p signifie que tous les premiers éléments e388a4556c0f65e1904146cc1a846bee après l'élément dc6dce4a544fdca2df29d5ac0ea9906b sont sélectionnés

Le "paragraphe zéro" et le "premier paragraphe" mentionnés ci-dessus ne sont pas sélectionnés car ils sont tous imbriqués dans le dc6dce4a544fdca2df29d5ac0ea9906b, pas l'élément après la balise ;

Le "deuxième paragraphe" est sélectionné car la balise e388a4556c0f65e1904146cc1a846bee est la première après les éléments de la balise dc6dce4a544fdca2df29d5ac0ea9906b élément parent 6c04bd5ca3fcae76e30b72ad730ca86d;

"Le troisième paragraphe" et "le quatrième paragraphe" ne sont pas sélectionnés car ils ne sont pas le

div+p{} représente le e388a4556c0f65e1904146cc1a846bee. immédiatement après la sélection de dc6dce4a544fdca2df29d5ac0ea9906b, mais la balise div de code ci-dessus immédiatement après la balise 45a2772a6b6107b401db3c9b82c049c2, c'est-à-dire qu'elle sélectionnera n'est pas immédiatement adjacent à la balise dc6dce4a544fdca2df29d5ac0ea9906b, donc l'élément e388a4556c0f65e1904146cc1a846bee ne peut pas être sélectionné

Au début, j'étais. je me demande vraiment pourquoi "Élément de liste 2" et "Élément de liste 3" ont tous deux été sélectionnés ~~~

Analysez d'abord le style du sélecteur : li+li{}, ce qui signifie littéralement sélectionner

tous les éléments situés dans < Le premier 1fa5ac9e4ed75a04a0bdbf51dbddf1fc

(1) Évidemment, la première balise 25edfb22a4f469ecb59f1190150159c6 sera sélectionnée car il s'agit de la balise 25edfb22a4f469ecb59f1190150159c6 immédiatement à côté de la première balise 25edfb22a4f469ecb59f1190150159c6

(3) La troisième balise 25edfb22a4f469ecb59f1190150159c6 li> est également une balise 25edfb22a4f469ecb59f1190150159c6, qui satisfait également aux conditions du sélecteur css li+li{} : le premier élément 25edfb22a4f469ecb59f1190150159c6 du conteneur est li+li{}, donc la balise li dans le code peut toujours appliquer cette "formule".

(Partage vidéo d'apprentissage :

Tutoriel vidéo 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!

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：Comment convertir une chaîne en tableau en javascriptArticle suivant：Comment convertir une chaîne en tableau en javascript

Articles Liés

Voir plus