Was bedeutet der CSS-Selektor "+" (Pluszeichen)?

Es ist die Auswahl für benachbarte Geschwister.

Von Splash of Style Blog.

Um einen benachbarten CSS-Selektor zu definieren, verwenden Sie die Pluszeichen wird verwendet.

h1+p {color:blue;}

Der obige CSS-Code formatiert die erster Absatz nach (nicht in) h1 Überschriften als blau.

h1>p wählt jedes p-Element aus, das ein direktes (erster Generation) Kind (innen) eines h1-Elements ist. 

• h1>p passt <h1><p></p></h1> (<p> in <h1>)

h1+p wählt das erste p-Element, das ein gleichgeordnetes Element (auf derselben Ebene des Doms) ist, als h1-Element aus. 

• h1+p passt <h1></h1><p><p/> (<p> neben/nach <h1>)

Das +-Zeichen bedeutet, dass Sie einen adjacent sibling auswählen.

Beispiel:

CSS

p + p
{
   font-weight: bold;
} 

HTML

Der Stil gilt ab dem zweiten <p>

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

Beispiel

Sehen Sie diese Fiddle und Sie werden es für immer verstehen: http://jsfiddle.net/7c05m7tv/ (Eine weitere Geige: http://jsfiddle.net/7c05m7tv/70/ )

Browser-Unterstützung

Angrenzende Geschwister-Selektoren werden in Internet Explorer 5.x Macintosh unterstützt. Sie werden auch in der Netscape 6-Preview-Version 1 für alle unzähligen Plattformen, für die sie verfügbar ist, und in der Preview-Version 3 von Opera 4 für Windows unterstützt. In IE5 für Windows und Opera 3 für Windows gibt es Fehler bei der Handhabung benachbarter Geschwister-Selektoren.

Gut zu wissen: Internet Explorer 7 aktualisiert den Stil nicht korrekt, wenn ein Element dynamisch vor einem Element platziert wird, das mit dem Selektor übereinstimmt. Wenn in Internet Explorer 8 ein Element dynamisch durch Klicken auf einen Link eingefügt wird, wird der First-Child-Stil erst angewendet, wenn der Link den Fokus verliert.

Mehr erfahren

• 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

"+" ist der benachbarte Geschwisterselektor. Es wählt ein beliebiges p DIREKT nach einem p aus (kein Kind oder Elternteil, aber ein Geschwister).

+-Selektor heißtAdjacent Sibling Selector. 

Der Selektorp + pwählt beispielsweise die p-Elemente aus, die unmittelbar auf die p-Elemente folgen 

Es kann als looking outside-Selektor betrachtet werden, der nach dem unmittelbar folgenden Element sucht. 

Hier ist ein Beispielausschnitt, um die Dinge klarer zu machen: 

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>

Da wir ein und dasselbe Thema sind, lohnt es sich, einen anderen Selektor zu erwähnen,~selector, nämlichGeneral Sibling Selector

Zum Beispiel wählt p ~ p alle p, die auf die p folgen, egal wo sie sich befindet, aber beide p sollten dasselbe übergeordnete Element haben. 

So sieht es mit dem gleichen Markup aus: 

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>

Beachten Sie, dass die letzte p auch in diesem Beispiel übereinstimmt. 

Es würde mit jedem Element p übereinstimmen, das unmittelbar an ein Element 'p' angrenzt. Siehe: http://www.w3.org/TR/CSS2/selector.html

+ zeigt einen der relativen Selektoren. Liste aller relativen Selektoren: 

div p - Alle <p>-Elemente in <div>-Elementen werden ausgewählt.

div > p - Alle <p>-Elemente, deren direktes übergeordnetes Element <div> ist, werden ausgewählt. Es funktioniert auch rückwärts (p < div)

div + p - Alle <p>-Elemente werden unmittelbar nach dem <div>-Element ausgewählt.

div ~ p - Alle <p>-Elemente, denen ein <div>-Element vorangeht, werden ausgewählt.

Mehr zu Selektoren check hier .

Es wählt den nächsten Absatz aus und drückt den Anfang des Absatzes von links ein, genau wie in Microsoft Word.

Das Pluszeichen (+) wählt das erste unmittelbare Element aus. Wenn Sie den + Selector verwenden, müssen Sie zwei Parameter angeben. Dies wird anhand des Beispiels klarer: Hier sind div und span Parameter, daher wird in diesem Fall nur der erste Span nach dem div formatiert. 

 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>

Der obige Stil gilt nur für den ersten Span nach div. Es ist wichtig zu beachten, dass der zweite Bereich nicht ausgewählt wird. 

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.

die endgültige Ausgabe sieht so aus