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

Question

Zum Beispiel:

p + p {
  /* Some declarations */
}

Ich weiß nicht, was die + bedeutet. Was ist der Unterschied zwischen dieser Vorgehensweise und der Definition eines Stils für p sin + p ?

Answer 1

Voir benachbarte 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.

Eine Ebene p Selektor würde die Formatvorlage auf jeden Absatz der Seite anwenden.

---

Dies funktioniert nur mit IE7 oder höher. Im IE6 wird der Stil nicht auf Elemente angewendet. Dies gilt auch für die > combinator, nebenbei bemerkt.

Siehe auch die Übersicht von Microsoft für CSS-Kompatibilität im Internet Explorer .

Answer 2

"+" ist der Selektor für benachbarte Geschwister. Er wählt ein beliebiges p DIREKT NACH einem p aus (kein Kind oder Elternteil, sondern ein Geschwisterteil).

Answer 3

Le site + Kombinator wird als Benachbarter Geschwisterkombinator / Nächster-Geschwister-Kombinator .

Zum Beispiel kann die Kombination von p + p Selektoren, wählt die p Elemente unmittelbar nach dem p Elemente

Man kann es sich als eine "nebenherschauende" Kombination vorstellen, die nach dem unmittelbar nach Element.

Hier ein Beispiel, um die Dinge zu verdeutlichen:

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 gerade beim Thema sind, sei ein weiterer Kombinator erwähnt, ~ das ist die Allgemeiner Geschwisterkombinator / Nachfolge-Geschwister-Kombinator

Zum Beispiel, p ~ p wählt alle p die folgt die p Es ist egal, wo es ist, aber beide p sollten denselben Elternteil 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 die letzte p wird auch in dieser Stichprobe abgeglichen.

Answer 4

Le site + Selektor zielt auf das folgende Element ab. In ähnlicher Weise ist der ~ Selektor zielt auf alle nachfolgenden Elemente ab. Hier ist ein Diagramm, falls Sie verwirrt sind:

Answer 5

+ präsentiert einen der relativen Selektoren. Hier finden Sie eine Liste aller relativen Selektoren:

div p - Alle <p> Elemente innerhalb einer <div> Element ausgewählt werden.

div > p - Alle <p> Elemente, deren direkter Elternteil <div> ausgewählt werden. Es funktioniert auch rückwärts ( p < div )

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

div ~ p - Alle <p> Elemente, die mit einem vorangestellten <div> Element ausgewählt werden.

Hier erfahren Sie mehr über Selektoren .