Nachfahren-Selektor
Lektion 8 von 15 im Kurs CSS Selectors von Coddy.
Im vorherigen Thema haben wir den Kind-Kombinator kennengelernt, der auf direkte Kinder eines Elements abzielt. Lassen Sie uns nun Nachfahren-Selektoren untersuchen, die durch ein Leerzeichen gekennzeichnet werden. Ein Nachfahren-Selektor ermöglicht es Ihnen, Elemente anzusprechen, die innerhalb eines anderen Elements auf einer beliebigen Ebene verschachtelt sind, nicht nur direkte Kinder.
Syntax
selector1 selector2 {
/* property declarations */
}Zum Beispiel,
<html>
<head>
<title>Combinator</title>
<style>
div p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>Die obige CSS-Regel wird beide Absätze rot formatieren und eine Schriftgröße von 2em festlegen.
Wie verhält es sich zu Kind-Selektoren?
Ein Nachfahren-Selektor ist allgemeiner als ein Kind-Selektor. Das bedeutet, dass ein Nachfahren-Selektor alle Elemente findet, die Nachfahren eines bestimmten Elements sind, während ein Kind-Selektor nur Elemente findet, die direkte Nachfahren eines bestimmten Elements sind.
Zum Beispiel findet der Selektor div p alle p-Elemente, die Nachfahren eines div-Elements sind, einschließlich p-Elemente, die innerhalb anderer p-Elemente verschachtelt sind. Der Selektor div > p findet nur p-Elemente, die direkte Nachfahren eines div-Elements sind.
Aufgabe
EinfachAufbauend auf der vorherigen Übung verwenden wir dieselbe HTML-Struktur. Schreiben Sie eine CSS-Regel unter Verwendung des Nachfahren-Selektors, um alle Absätze innerhalb des Elements .list zu formatieren, unabhängig von ihrer Verschachtelungstiefe. Geben Sie ihnen eine neue Farbe, Größe und Schriftart, wie es Ihnen gefällt.
Probier es selbst
<html>
<head>
<title>Descendant Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<div>
<p>This paragraph is not inside a list</p>
<ul class="list">
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<div>
<p>This is a paragraph inside a nested div within a list item.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
Alle Lektionen in CSS Selectors
3Kombinator-Selektoren
Kind-SelektorNachfahren-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-Selektor