Que signifie le sélecteur CSS «+» (signe plus)?

Par exemple:

p + p {
  /* Some declarations */
}

Je ne sais pas ce que cela +signifie. Quelle est la différence entre cela et juste définir un style pour psans + p?

Voir les sélecteurs adjacents sur W3.org.

Dans ce cas, le sélecteur signifie que le style s'applique uniquement aux paragraphes qui suivent directement un autre paragraphe.

Un simple psélecteur appliquerait le style à chaque paragraphe de la page.

Cela ne fonctionnera que sur IE7 ou supérieur. Dans IE6, le style ne sera appliqué à aucun élément. Cela vaut également pour le >combinateur, soit dit en passant.

Voir également la présentation de Microsoft pour la compatibilité CSS dans Internet Explorer .

C'est le sélecteur de frère adjacent.

Du blog Splash of Style.

Pour définir un sélecteur CSS adjacent, le signe plus est utilisé.

h1+p {color:blue;}

Le code CSS ci-dessus formatera le premier paragraphe après (pas à l'intérieur) des en-têtes h1 en bleu.

h1>psélectionne tout pélément qui est un enfant direct (première génération) (à l'intérieur) d'un h1élément.

• h1>pallumettes <h1> <p></p> </h1>(à l' <p>intérieur <h1>)

h1+psélectionnera le premier pélément qui est un frère (au même niveau du dom) qu'un h1élément.

• h1+pmatchs <h1></h1> <p><p/>(à <p>côté / après <h1>)

Le +signe signifie sélectionner un "frère adjacent"

Par exemple, ce style s'appliquera à partir du second <p>:

p + p {
   font-weight: bold;
} 

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

Exemple

Voir ce JSFiddle et vous le comprendrez: http://jsfiddle.net/7c05m7tv/ (Un autre JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )

Prise en charge du navigateur

Les sélecteurs frères adjacents sont pris en charge dans tous les navigateurs modernes.

Apprendre encore plus

• http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
• http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

"+" est le sélecteur frère adjacent. Il sélectionnera n'importe quel p DIRECTEMENT APRÈS ap (pas un enfant ou un parent cependant, un frère ou une sœur).

+le sélecteur est appelé Adjacent Sibling Selector.

Par exemple, le sélecteur p + psélectionne les péléments suivant immédiatement les péléments

Il peut être considéré comme un looking outsidesélecteur qui vérifie l'élément immédiatement suivant.

Voici un exemple d'extrait pour clarifier les choses:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p + p {
  margin-left: 10px;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Puisque nous sommes sur le même sujet, il convient de mentionner un autre sélecteur, ~sélecteur, qui estGeneral Sibling Selector

Par exemple, p ~ psélectionne tout ce pqui suit ppeu importe où il se trouve, mais les deux pdoivent avoir le même parent.

Voici à quoi cela ressemble avec le même balisage:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p ~ p {
  margin-left: 10px;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Notez que le dernier pcorrespond également dans cet exemple.

Il correspondrait à tout élément pimmédiatement adjacent à un élément 'p'. Voir: http://www.w3.org/TR/CSS2/selector.html

+présente l'un des sélecteurs relatifs. Liste de tous les sélecteurs relatifs:

div p- Tous les <p>éléments à l'intérieur des <div>éléments sont sélectionnés.

div > p- Tous les <p>éléments dont le parent direct est <div>sélectionné. Cela marche aussi en arrière ( p < div)

div + p- Tous les <p>éléments sont placés immédiatement après la <div>sélection de l'élément.

div ~ p- Tous les <p>éléments précédés d'un <div>élément sont sélectionnés.

Pour en savoir plus sur les sélecteurs, cliquez ici .

Il sélectionne le paragraphe suivant et met en retrait le début du paragraphe à partir de la gauche comme vous le feriez dans Microsoft Word.

p+p{
//styling the code
}

p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

la sortie finale ressemble à ceci

Le Plus (+) sélectionnera le premier élément immédiat. Lorsque vous utilisez le sélecteur +, vous devez donner deux paramètres. Cela sera plus clair par exemple: ici div et span sont des paramètres, donc dans ce cas, seul le premier span après le div sera stylisé.

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

Le style ci-dessus ne s'applique qu'à la première travée après la division. Il est important de noter que la deuxième plage ne sera pas sélectionnée.

Cela signifie qu'il correspond à chaque pélément qui est immédiatement adjacent

www.snoopcode.com/css/examples/css-adjacent-sibling-selector