Testen Sie Ihre Fähigkeiten: Das Kaskadenprinzip
Ziel dieses Fähigkeiten-Tests ist es, Ihnen zu helfen, einzuschätzen, ob Sie universelle Eigenschaftswerte für Steuerung der Vererbung in CSS verstehen.
Hinweis: Um Unterstützung zu erhalten, lesen Sie unseren Testen Sie Ihre Fähigkeiten Leitfaden. Sie können auch einen unserer Kommunikationskanäle nutzen, um uns zu erreichen.
Kaskade 1
In dieser Aufgabe möchten wir, dass Sie einen der speziellen Werte verwenden, die wir im Abschnitt zur Steuerung der Vererbung betrachtet haben.
Um die Aufgabe abzuschließen, schreiben Sie eine Deklaration in einer neuen Regel, die die Hintergrundfarbe wieder auf Weiß zurücksetzt, ohne einen tatsächlichen Farbwert zu verwenden.
Der Ausgangspunkt der Aufgabe sieht so aus:
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
<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;
}
Das aktualisierte Styling sollte so aussehen:
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 macht. 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 inherit die Hintergrundfarbe zurück, sodass sie mit dem Elternelement übereinstimmt.
Kaskade 2
Um diese Aufgabe abzuschließen, manipulieren Sie die Reihenfolge der Kaskadenschichten, um die Links rebeccapurple zu färben. Bearbeiten Sie nicht die lightgreen Deklaration!
Diese Aufgabe ist ein Stretch-Goal — sie erfordert Kenntnisse über Kaskadenschichten, die wir im Artikel Konflikte behandeln nicht behandelt haben. Sie können die benötigten Informationen in Kaskadenschichten > Bestimmung der Vorrangregelung basierend auf der Reihenfolge der Schichten finden.
Der Ausgangspunkt der Aufgabe sieht so aus:
Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:
<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;
}
}
Das aktualisierte Styling sollte so aussehen:
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 Vorrangregelung, sodass die Deklaration für die gewünschte Farbe in der zuletzt deklarierten Schicht erscheint, was diese Lösung zeigt.
Sie müssen sich daran erinnern, dass nicht geschichtete normale Stile Vorrang vor geschichteten normalen Stilen haben. Aber wenn alle Stile innerhalb von Schichten sind — wie bei dieser Aufgabe — haben Stile in später deklarierten Schichten Vorrang vor Stilen, die in früher deklarierten Schichten deklariert wurden. Wenn die violette Schicht am Ende platziert wird, erhält sie Vorrang vor den grünen und gelben Schichten.