webentwicklung-frage-antwort-db.com.de

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

Zum Beispiel:

p + p {
  /* Some declarations */
}

Ich weiß nicht was der + bedeutet. Was ist der Unterschied zwischen dieser Einstellung und der Definition eines Stils für p ohne + p?

667
gday

Diese Auswahl bedeutet, dass der Stil nur für Absätze gilt, die direkt auf einen anderen Absatz folgen.
Ein einfacher p-Selektor würde den Stil auf jeden Absatz der Seite anwenden.

Siehe benachbarte Selektoren auf W3.org.


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

Siehe auch die Übersicht von Microsoft zur CSS-Kompatibilität in Internet Explorer .

693
Thorarin

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>)
187
Matthew Vines

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

52
Cas Bloem

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

40

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

22
Lijo Joseph

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

10
Michael Morton

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

6
Nesha Zoric

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

2
flo

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. 

1
user6142140
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

 enter image description here

0
IMRA