Zum Beispiel:
div > p.some_class {
/* Some declarations */
}Was genau bedeutet die > Zeichen bedeuten?
Antworten
Zu viele Anzeigen?
> ist die Kinderkombinator manchmal fälschlicherweise als direkter Abkömmlingskombinator bezeichnet. 1
Das bedeutet, dass der Selektor div > p.some_class entspricht nur Absätzen von .some_class die verschachtelt sind direkt im Inneren a div und nicht irgendwelche Absätze, die weiter darin verschachtelt sind. Dies bedeutet, dass jedes Element, das mit div > p.some_class entspricht notwendigerweise auch div p.some_class , mit dem Nachkomme-Kombinator (Raum), so dass die beiden verständlicherweise oft verwechselt werden.
Eine Illustration, in der der Child-Combinator mit dem Descendant-Combinator verglichen wird:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>Welche Elemente werden von welchen Selektoren gefunden?
-
Abgestimmt von beiden
div > p.some_classydiv p.some_class
Diesep.some_classbefindet sich direkt innerhalb derdivund somit eine Eltern-Kind-Beziehung zwischen den beiden Elementen hergestellt wird. Da "Kind" ein Typ von "Nachkomme" ist, ist jedes Kindelement per Definition auch ein Nachkomme. Daher werden beide Regeln angewandt. -
Abgestimmt nur durch
div p.some_class
Diesep.some_classist enthalten in einerblockquoteinnerhalb derdivund nicht diedivselbst. Obwohl diesp.some_classist ein Abkömmling derdivist es kein Kind, sondern ein Enkelkind. Daher wird nur die Regel mit dem Deszendenten-Kombinator in ihrem Selektor angewendet.
1 Viele Leute gehen noch weiter und nennen es "direktes Kind" oder "unmittelbares Kind", aber das ist völlig unnötig (und für mich unglaublich ärgerlich), denn ein Kindelement <strong>ist unmittelbar <em>per Definition </em></strong>Sie bedeuten also genau das Gleiche. So etwas wie ein "indirektes Kind" gibt es nicht.
Premraj
Punkte
65511
> (Größer-als-Zeichen) ist ein CSS-Kombinator.
Ein Kombinator ist etwas, das die Beziehung zwischen den Selektoren erklärt.
Ein CSS-Selektor kann mehr als einen einfachen Selektor enthalten. Zwischen den einfachen Selektoren können wir einen Kombinator einfügen.
In CSS3 gibt es vier verschiedene Kombinatoren:
- Nachkommenschaftsselektor (Leerzeichen)
- untergeordneter Selektor (>)
- Selektor für benachbarte Geschwister (+)
- allgemeiner Geschwisterselektor (~)
Nota: < ist in CSS-Selektoren nicht gültig.
Zum Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>Ausgabe:
Dagg Nabbit
Punkte
72150
dan04
Punkte
82011
Avinash Malhotra
Punkte
538
( Child-Selektor) wurde in css2 eingeführt. div p{ } wählt alle p-Elemente aus, die Nachkommen von div-Elementen sind, wohingegen div > p nur p-Elemente auswählt, die Kinder sind, nicht aber Enkel, Urenkel und so weiter.
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>Weitere Informationen über CSS Ce[lectors und ihre Verwendung finden Sie in meinem Blog, css-Selektoren y css3-Selektoren
- See previous answers
- Weitere Antworten anzeigen
