Question Que signifie le sélecteur CSS "+" (signe plus)?


Par exemple:

p + p {
  /* Some declarations */
}

Je ne sais pas ce que + veux dire. Quelle est la différence entre ceci et simplement définir un style pour p sans pour autant + p?


633
2017-07-16 19:26


origine


Réponses:


Ce sélecteur signifie que le style s'applique uniquement aux paragraphes suivant directement un autre paragraphe.
Une plaine p Le sélecteur appliquerait le style à chaque paragraphe de la page.

Voir sélecteurs adjacents sur W3.org.


Cela ne fonctionnera qu'avec IE7 ou plus. Dans IE6, le style ne sera appliqué à aucun élément. Cela vaut également pour le > combinateur, d'ailleurs.

Voir aussi l'aperçu de Microsoft pour Compatibilité CSS dans Internet Explorer.


654
2017-07-16 19:29



C'est le sélecteur Adjacent frère.

De Splash of Style blog.

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) toutes les rubriques h1   en bleu

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

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

h1+p sélectionnera le premier p élément qui est un frère (au même niveau de la dom) en tant que h1 élément.

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

172
2017-07-16 19:29



le + signe signifie sélectionner un adjacent sibling

Exemple:

CSS

p + p
{
   font-weight: bold;
} 

HTML

Le style s'appliquera à partir de la seconde <p>

<div>
   <p></p>
   <p></p>
</div>

Exemple

Voyez ce violon et vous le comprendrez pour toujours: http://jsfiddle.net/7c05m7tv/ (Un autre violon: http://jsfiddle.net/7c05m7tv/70/)


Support du navigateur

Les sélecteurs adjacents sont pris en charge dans Internet Explorer 5.x Macintosh. Ils sont également pris en charge dans la version preview 1 de Netscape 6 pour toutes les myriades de plates-formes pour lesquelles elle est disponible, et dans la version preview 3 d'Opera 4 pour Windows. Il y a des bogues dans le traitement des sélecteurs adjacents dans IE5 pour Windows et Opera 3 pour Windows.

Bon à savoir: Internet Explorer 7 ne met pas à jour le style correctement lorsqu'un élément est placé dynamiquement avant un élément qui correspond au sélecteur. Dans Internet Explorer 8, si un élément est inséré dynamiquement en cliquant sur un lien, le style premier enfant n'est pas appliqué tant que le lien n'a pas été mis au point.


Apprendre encore plus


47
2017-09-02 11:02



"+" est le sélecteur de frère adjacent. Il sélectionnera tout p directement après un p (pas un enfant ou un parent si un frère).


39
2017-07-16 19:29



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

Par exemple, le sélecteur p + p, sélectionne le p éléments immédiatement après p éléments

Cela peut être considéré comme un looking outside sélecteur qui vérifie l'élément 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 un même sujet, il vaut la peine de mentionner un autre sélecteur, ~ sélecteur, qui est General Sibling Selector

Par exemple, p ~ p sélectionne tous les p qui suit le p peu importe où c'est, mais les deux p devrait 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 p est également apparié dans cet exemple.


21
2017-10-10 12:33



Cela correspond à n'importe quel élément p C'est immédiatement adjacent à un élément 'p'. Voir: http://www.w3.org/TR/CSS2/selector.html


10
2017-07-16 19:29



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


2
2017-07-16 19:35



Le Plus (+) sélectionnera le premier élément immédiat. Lorsque vous utilisez + sélecteur, vous devez donner deux paramètres. Ce sera plus clair par exemple:   ici div et span sont des paramètres, donc dans ce cas seulement la première durée après le div sera dénommé.

 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'appliquera qu'au premier span après div. Il est important de noter que la deuxième plage ne sera pas sélectionnée.


1
2017-08-03 19:40



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.

sortie finale ressemble à ceci

enter image description here 


0
2018-01-19 12:51