Wie wird das Zeichen "größer als" oder ">" in CSS verwendet?

159

Ich habe dieses Zeichen mehrmals in CSS-Dateien gesehen, aber ich habe keine Ahnung, wie es verwendet wird. Kann mir jemand das erklären und zeigen, wie nützlich es ist, einen Seitenstil zu vereinfachen?

css css-selectors Sam152
quelle
1
Beachten Sie, dass Windows Internet Explorer 7 oder höher erforderlich ist. Oder FF oder ein moderner Browser. http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx
Vili
Übrigens> wird normalerweise als "größer als" (oder streng genommen fälschlicherweise als rechtwinklige Klammer) bezeichnet.
Richard
1
Mögliches Duplikat von Was bedeutet der CSS-Selektor ">" (größer als Vorzeichen)?
TZHX

Antworten:

199

Es ist eine CSS-Kinderauswahl. P > SPANbedeutet, dass der folgende Stil auf alle SPAN-Tags angewendet wird, die untergeordnete Elemente eines PTags sind.

Beachten Sie, dass "Kind" "unmittelbarer Nachkomme" bedeutet, nicht irgendein Nachkomme. P SPANist ein Nachkommen-Selektor , der den folgenden Stil auf alle SPANTags anwendet , die Kinder eines PTags oder rekursiv Kinder eines anderen Tags sind, das ein Kind / ein Nachkomme eines PTags ist. P > SPANgilt nur für SPANTags, die untergeordnete PElemente eines Tags sind.

tpdi
quelle
6
Ein Hinweis zur Vorsicht - es wird in ie6 nicht unterstützt
whereesrhys
138 
p em

wird mit jedem übereinstimmen <em>, der innerhalb eines <p>. Zum Beispiel würde es mit den folgenden <em>s übereinstimmen :

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

Andererseits,

p > em

Passt nur zu <em>s, die unmittelbare Kinder von sind <p>. Also wird es passen: 

<p>Text <em>foo</em> bar</p>

Aber nicht:

<p><strong><em>foo</em></strong></p>
Brian Campbell
quelle
7
Schönes, klares Beispiel. Obwohl die Antwort von tpdi hilfreich war, hat diese das Verständnis wirklich erleichtert.
J. Scott Elblein
8

Dies ist als Kinderkombinator bekannt:

Ein untergeordneter Kombinator-Selektor wurde hinzugefügt, um den Inhalt von Elementen, die in anderen angegebenen Elementen enthalten sind, formatieren zu können. Angenommen, man möchte Weiß als Farbe für Hyperlinks innerhalb von div-Tags für eine bestimmte Klasse festlegen, da diese einen dunklen Hintergrund haben. Dies kann erreicht werden, indem ein Punkt zum Kombinieren von div mit den Klassenressourcen und ein Vorzeichen größer als ein Kombinator zum Kombinieren des Paares mit a verwendet werden, wie unten gezeigt:

div.resources > a{color: white;}

(von http://www.xml.com/pub/a/2003/06/18/css3-selectors.html )

Adam Alexander
quelle