Was bedeutet der CSS-Selektor „+“ (Pluszeichen)?

Zum Beispiel:

p + p {
  /* Some declarations */
}

Ich weiß nicht was das +bedeutet. Was ist der Unterschied zwischen diesem und dem Definieren eines Stils für pohne + p?

Siehe nebenstehende Selektoren auf W3.org.

In diesem Fall bedeutet der Selektor, dass der Stil nur für Absätze gilt, die direkt auf einen anderen Absatz folgen.

Ein einfacher pSelektor würde den Stil auf jeden Absatz auf der Seite anwenden.

Dies funktioniert nur mit IE7 oder höher. In IE6 wird der Stil nicht auf Elemente angewendet. Dies gilt >übrigens auch für den Kombinator.

Informationen zur CSS-Kompatibilität in Internet Explorer finden Sie auch in der Microsoft-Übersicht .

Es ist der benachbarte Geschwister-Selektor.

Aus dem Splash of Style Blog.

Um einen CSS-benachbarten Selektor zu definieren, wird das Pluszeichen verwendet.

h1+p {color:blue;}

Der obige CSS-Code formatiert den ersten Absatz nach (nicht innerhalb) h1-Überschriften als blau.

h1>pWählt jedes pElement aus, das ein direktes Kind (erste Generation) (innerhalb) eines h1Elements ist.

• h1>pStreichhölzer <h1> <p></p> </h1>( <p>innen <h1>)

h1+pwählt das erste pElement, das ein Geschwister ist (auf derselben Ebene des Doms), als h1Element aus.

• h1+pÜbereinstimmungen <h1></h1> <p><p/>( <p>neben / nach <h1>)

Das +Zeichen bedeutet, dass Sie ein "benachbartes Geschwister" auswählen.

Dieser Stil gilt beispielsweise ab dem zweiten <p>:

p + p {
   font-weight: bold;
} 

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

Beispiel

Sehen Sie sich diese JSFiddle an und Sie werden es verstehen: http://jsfiddle.net/7c05m7tv/ (Eine weitere JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )

Browser-Unterstützung

Benachbarte Geschwisterselektoren werden in allen modernen Browsern unterstützt.

Erfahren Sie mehr

• 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 Geschwister-Selektor. Es wird jedes p DIREKT NACH ap ausgewählt (jedoch kein Kind oder Elternteil, kein Geschwister).

+Selektor wird aufgerufen Adjacent Sibling Selector.

Der Selektor p + pwählt beispielsweise die pElemente aus, die unmittelbar auf die pElemente folgen

Es kann als looking outsideSelektor 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 dasselbe Thema sind, ist es wert, einen anderen Selektor zu erwähnen, den ~SelektorGeneral Sibling Selector

Wählt zum Beispiel p ~ palle pfolgenden pElemente aus, unabhängig davon, wo sie sich befinden, aber beide psollten dasselbe übergeordnete Element haben.

So sieht es mit demselben 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 der letzte pauch in diesem Beispiel übereinstimmt.

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

+präsentiert einen der relativen Selektoren. Liste aller relativen Selektoren:

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

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

div + p- Alle <p>Elemente werden unmittelbar nach der <div>Auswahl des Elements platziert.

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

Weitere Informationen zu Selektoren finden Sie hier .

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

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

Das Pluszeichen (+) wählt das erste unmittelbare Element aus. Wenn Sie den + Selektor verwenden, müssen Sie zwei Parameter angeben. Dies wird anhand eines Beispiels deutlicher: Hier sind div und span Parameter, sodass in diesem Fall nur die erste Spanne nach dem div gestaltet wird.

 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 die erste Spanne nach div. Es ist wichtig zu beachten, dass die zweite Spanne nicht ausgewählt wird.

Dies bedeutet, dass es mit jedem pElement übereinstimmt, das unmittelbar benachbart ist

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