Prüfen Sie Ihre Fähigkeiten: Die Kaskade
Ziel dieses Fertigkeitstests ist es zu beurteilen, ob Sie die universellen Eigenschaftswerte zum Steuern der Vererbung in CSS verstehen.
Hinweis: Klicken Sie unten in den Codeblöcken auf „Abspielen“, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Zwischenablage-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie uns in einem unserer Kommunikationskanäle erreichen.
Aufgabe 1
In dieser Aufgabe möchten wir, dass Sie einen der speziellen Werte verwenden, die wir im Abschnitt Steuern der Vererbung betrachtet haben. Schreiben Sie eine Deklaration in einer neuen Regel, die die Hintergrundfarbe wieder auf Weiß zurücksetzt, ohne einen tatsächlichen Farbwert zu verwenden.
Ihr Endergebnis sollte wie im Bild unten aussehen:
Versuchen Sie, den unten stehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:
<div class="container" id="outer">
<div class="container" id="inner">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
#outer div ul .nav a {
background-color: powderblue;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
div div li a {
color: rebeccapurple;
}
Klicken Sie hier, um die Lösung anzuzeigen
Eine mögliche Lösung ist wie folgt:
#outer #inner a {
background-color: initial;
}
Es gibt zwei Dinge, die Sie in dieser Aufgabe tun müssen. Erstens, schreiben Sie einen Selektor für das a-Element, der spezieller ist als der Selektor, der den Hintergrund powderblue färbt. In dieser Lösung wird dies durch die Verwendung des id-Selektors erreicht, der eine sehr hohe Spezifität hat.
Dann müssen Sie sich daran erinnern, dass es spezielle Schlüsselwortwerte für alle Eigenschaften gibt. In diesem Fall setzt die Verwendung von inherit die Hintergrundfarbe auf die gleiche wie das übergeordnete Element zurück.
Aufgabe 2
In dieser Aufgabe möchten wir, dass Sie die Reihenfolge der Kaskadenschichten manipulieren, um die Links in rebeccapurple zu färben. Die lightgreen-Deklaration darf nicht bearbeitet werden!
Diese Aufgabe ist ein erweitertes Ziel – sie erfordert Kenntnisse über Kaskadenschichten, die wir nicht im Artikel Konflikte handhaben behandelt haben. Sie können die benötigten Informationen unter Kaskadenschichten > Bestimmung der Vorrangordnung basierend auf der Reihenfolge der Schichten finden.
Ihr Endergebnis sollte wie im Bild unten aussehen:
Versuchen Sie, den unten stehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:
<div class="container" id="outer">
<div class="container" id="inner">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
@layer yellow, purple, green;
@layer yellow {
#outer div ul .nav a {
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}
}
@layer purple {
div div li a {
color: rebeccapurple;
}
}
@layer green {
a {
color: lightgreen;
}
}
Klicken Sie hier, um die Lösung anzuzeigen
Eine mögliche Lösung ist wie folgt:
@layer yellow, green, purple;
In dieser Aufgabe müssen Sie eine Sache tun: die Vorrangordnung so ändern, dass die Deklaration für die gewünschte Farbe in der zuletzt deklarierten Schicht ist, was diese Lösung zeigt.
Sie müssen sich daran erinnern, dass nicht geschichtete normale Stile Vorrang vor geschichteten normalen Stilen haben. Wenn jedoch alle Stile innerhalb von Schichten sind – wie in dieser Aufgabe – haben Stile in später deklarierten Schichten Vorrang vor Stilen in früher deklarierten Schichten. Das Verschieben der lila Schicht an das Ende bedeutet, dass sie Vorrang vor den grünen und gelben Schichten hat.