Testen Sie Ihre Fähigkeiten: Der Kaskade
Ziel dieses Fähigkeitstests ist es zu bewerten, ob Sie universelle Eigenschaftswerte zum Steuern der Vererbung in CSS verstehen.
Hinweis: Klicken Sie auf "Play" in den Codeblöcken unten, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Clipboard-Symbol) und ihn in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
In dieser Aufgabe möchten wir, dass Sie einen der speziellen Werte verwenden, den wir im Abschnitt Steuern der Vererbung besprochen 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 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: inherit;
}
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 powderblue färbt. In dieser Lösung wird dies durch die Verwendung des id-Selectors erreicht, der eine sehr hohe Spezifität hat.
Dann müssen Sie daran denken, dass es spezielle Schlüsselwortwerte für alle Eigenschaften gibt. In diesem Fall setzt 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 rebeccapurple zu färben. Bearbeiten Sie nicht die lightgreen-Deklaration!
Diese Aufgabe ist ein Stretch-Ziel — sie erfordert Wissen über Kaskadenschichten, das wir im Artikel Handling conflicts nicht behandelt haben. Sie finden die benötigten Informationen unter Cascade layers > Determining the precedence based on the order of layers.
Ihr Endergebnis 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 daran denken, dass nicht geschichtete normale Stile Vorrang vor geschichteten normalen Stilen haben. Aber wenn alle Stile in Schichten sind — wie in dieser Aufgabe — haben Stile in später deklarierten Schichten Vorrang vor Stilen, die in früheren Schichten deklariert wurden. Das Verschieben der violetten Schicht ans Ende bedeutet, dass sie Vorrang vor den grünen und gelben Schichten hat.