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 p
ohne + p
?
css
css-selectors
Tag auch
quelle
quelle
Antworten:
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
p
Selektor 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 .
quelle
visibility : hidden/visible
anstelle vondisplay : none/block
. Siehe diese Referenz .p > p
bedeutet ein verschachteltesp
, ei jedesp
, das direkt unter einem anderen liegtp
, wie z<p><p>This paragraph</p></p>
.Es ist der benachbarte Geschwister-Selektor.
Aus dem Splash of Style Blog.
h1>p
Wählt jedesp
Element aus, das ein direktes Kind (erste Generation) (innerhalb) einesh1
Elements ist.h1>p
Streichhölzer<h1>
<p></p>
</h1>
(<p>
innen<h1>
)h1+p
wählt das erstep
Element, das ein Geschwister ist (auf derselben Ebene des Doms), alsh1
Element aus.h1+p
Übereinstimmungen<h1></h1>
<p><p/>
(<p>
neben / nach<h1>
)quelle
plus sign
undgreater sign
. Wenn ichh1>p
anstelle von verwendeh1+p
, gibt es mir das gleiche Ergebnis? Könnten Sie ein wenig erklären, wie unterschiedlich sie sind?h1>p
einp
Element aus, das ein direktes untergeordnetes Element (erste Generation) einesh1
Elements ist.h1+p
wählt das erstep
Element, das ein Geschwister ist (auf derselben Ebene des Doms), alsh1
Element aus.h1>p
Spiele<h1><p><p></h1>
,h1+p
Spiele<h1></h1><p><p/>
Das
+
Zeichen bedeutet, dass Sie ein "benachbartes Geschwister" auswählen.Dieser Stil gilt beispielsweise ab dem zweiten
<p>
: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
quelle
"+" ist der benachbarte Geschwister-Selektor. Es wird jedes p DIREKT NACH ap ausgewählt (jedoch kein Kind oder Elternteil, kein Geschwister).
quelle
+
Selektor wird aufgerufenAdjacent Sibling Selector
.Der Selektor
p + p
wählt beispielsweise diep
Elemente aus, die unmittelbar auf diep
Elemente folgenEs kann als
looking outside
Selektor betrachtet werden, der nach dem unmittelbar folgenden Element sucht.Hier ist ein Beispielausschnitt, um die Dinge klarer zu machen:
Da wir dasselbe Thema sind, ist es wert, einen anderen Selektor zu erwähnen, den
~
SelektorGeneral Sibling Selector
Wählt zum Beispiel
p ~ p
allep
folgendenp
Elemente aus, unabhängig davon, wo sie sich befinden, aber beidep
sollten dasselbe übergeordnete Element haben.So sieht es mit demselben Markup aus:
Beachten Sie, dass der letzte
p
auch in diesem Beispiel übereinstimmt.quelle
Es würde mit jedem Element übereinstimmen
p
, das unmittelbar an ein Element 'p' angrenzt. Siehe: http://www.w3.org/TR/CSS2/selector.htmlquelle
+
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 .
quelle
Es wählt den nächsten Absatz aus und rückt den Anfang des Absatzes wie in Microsoft Word von links ein.
quelle
Die endgültige Ausgabe sieht so aus
quelle
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.
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
Dies bedeutet, dass es mit jedem
p
Element übereinstimmt, das unmittelbar benachbart istwww.snoopcode.com/css/examples/css-adjacent-sibling-selector
quelle