Testen Sie Ihre Fähigkeiten: Die Kaskade
Das Ziel dieses Fähigkeitstests ist es, festzustellen, ob Sie die universellen Eigenschaftswerte für das Steuern der Vererbung in CSS verstehen.
Hinweis: Klicken Sie auf "Play" in den Code-Blöcken unten, 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 sich über einen unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
In dieser Aufgabe möchten wir, dass Sie einen der speziellen Werte verwenden, die wir im Abschnitt Steuern der Vererbung behandelt haben. Schreiben Sie eine Anweisung in einer neuen Regel, die die Hintergrundfarbe wieder auf Weiß zurücksetzt, ohne einen tatsächlichen Farbwert zu verwenden.
Ihr endgültiges Ergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den folgenden 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. Zuerst schreiben Sie einen Selektor für das a-Element, der spezifischer ist als der Selektor, der den Hintergrund in Hellblau verwandelt. In dieser Lösung wurde 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 inherit die Hintergrundfarbe wieder zurück auf die des Elternelements.
Aufgabe 2
In dieser Aufgabe möchten wir, dass Sie die Reihenfolge der Kaskadenschichten manipulieren, um die Links in rebeccapurple zu färben. Bearbeiten Sie nicht die lightgreen-Deklaration!
Diese Aufgabe ist ein erweitertes Ziel — sie erfordert Wissen über Kaskadenschichten, das wir im Artikel Konflikte behandeln nicht behandelt haben. Die benötigten Informationen finden Sie unter Kaskadenschichten > Bestimmen der Vorrangstellung basierend auf der Reihenfolge der Schichten.
Ihr endgültiges Ergebnis sollte wie das untenstehende Bild aussehen:
Versuchen Sie, den folgenden 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;
Es gibt eine Sache, die Sie in dieser Aufgabe tun müssen: Ändern Sie die Reihenfolge der Priorität, sodass 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 in Schichten sind — wie in diesem Fall — haben Stile in später deklarierten Schichten Vorrang vor vorher deklarierten Schichten. Wenn Sie die violette Schicht ans Ende verschieben, hat sie Vorrang vor den grünen und gelben Schichten.