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

750

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?

Tag auch
quelle
In der Praxis ist dies meistens nützlich, um einen Rand oder eine Auffüllung zwischen Listenelementen derselben Art anzuwenden, sodass für das erste oder letzte Element kein Sonderfall erforderlich ist.
Christophe Roussy

Antworten:

749

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 .

Thorarin
quelle
Ich fand es nützlich, das Element nicht zu reduzieren, wenn es versteckt ist. Daher ist eine geeignetere Möglichkeit, es auszublenden, die Verwendung von visibility : hidden/visibleanstelle von display : none/block. Siehe diese Referenz .
KFL
6
Was wird der Unterschied zwischen p + p und p> p sein
Muhammad Rizwan
7
@MuhammadRizwan p > pbedeutet ein verschachteltes p, ei jedes p, das direkt unter einem anderen liegt p, wie z <p><p>This paragraph</p></p>.
Banana
203

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>)
Matthew Vines
quelle
3
Ich bin verwirrt zwischen plus signund greater sign. Wenn ich h1>panstelle von verwende h1+p, gibt es mir das gleiche Ergebnis? Könnten Sie ein wenig erklären, wie unterschiedlich sie sind?
lvarayut
91
Wählt in Ihren Beispielen h1>pein pElement aus, das ein direktes untergeordnetes Element (erste Generation) eines h1Elements ist. h1+pwählt das erste pElement, das ein Geschwister ist (auf derselben Ebene des Doms), als h1Element aus. h1>pSpiele <h1><p><p></h1>, h1+pSpiele<h1></h1><p><p/>
Matthew Vines
1
@MatthewVines u sollte das h1> p und h1 + p zu Ihrer Antwort
hinzufügen
In Ihrem Beispiel stimmt es also im Wesentlichen mit dem ersten <p> nach <h1> überein, aber würde es auch mit demselben <p> übereinstimmen, wenn es vor <h1> käme? Oder ist es erst danach?
Vincent
53

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

Cas Bloem
quelle
42

"+" ist der benachbarte Geschwister-Selektor. Es wird jedes p DIREKT NACH ap ausgewählt (jedoch kein Kind oder Elternteil, kein Geschwister).

Gordon Gustafson
quelle
23

+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.

Lijo Joseph
quelle
8

+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 .

Nesha Zoric
quelle
Der letzte Selektor ist falsch. Laut MDN : Der allgemeine Geschwisterkombinator (~) trennt zwei Selektoren und stimmt nur dann mit dem zweiten Element überein, wenn er dem ersten Element folgt (wenn auch nicht unbedingt sofort), und beide sind Kinder desselben übergeordneten Elements
Carles Alcolea
2

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

flo
quelle
2
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

Geben Sie hier die Bildbeschreibung ein

IMRA
quelle
1

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.


quelle