CSS-Nesting von At-Rules
Jede At-Rule, deren Block Stilregeln enthält, kann mithilfe der CSS-Verschachtelung innerhalb einer anderen Stilregel verschachtelt werden. Stilregeln, die in At-Rules verschachtelt sind, übernehmen ihre Definition des Verschachtelungsselectors von der nächsten übergeordneten Stilregel. Eigenschaften können direkt in eine verschachtelte At-Rule aufgenommen werden, als ob sie in einem & {...} Block verschachtelt wären.
At-Rules, die verschachtelt werden können
Beispiele
Verschachtelung der @media-At-Rule
In diesem Beispiel sehen wir drei Blöcke von CSS. Der erste zeigt, wie man eine typische At-Rule-Verschachtelung schreibt, der zweite ist eine erweiterte Art, die Verschachtelung so zu schreiben, wie sie der Browser parst, und der dritte zeigt das nicht verschachtelte Äquivalent.
Verschachteltes CSS
.foo {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
}
}
Erweitertes verschachteltes CSS
.foo {
display: grid;
@media (orientation: landscape) {
& {
grid-auto-flow: column;
}
}
}
Nicht-verschachteltes Äquivalent
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
Mehrere verschachtelte @media-At-Rules
At-Rules können innerhalb anderer At-Rules verschachtelt werden. Unten sehen Sie ein Beispiel dafür und wie es ohne Verschachtelung geschrieben würde.
Verschachtelte At-Rules
.foo {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
@media (width >= 1024px) {
max-inline-size: 1024px;
}
}
}
Nicht-verschachteltes Äquivalent
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
@media (orientation: landscape) and (width >= 1024px) {
.foo {
max-inline-size: 1024px;
}
}
Verschachtelung von Kaskadenschichten (@layer)
Kaskadenschichten können verschachtelt werden, um Kindschichten zu erstellen. Diese werden mit einem Punkt . verbunden.
Definition der übergeordneten und untergeordneten Schichten
Wir beginnen damit, die benannten Kaskadenschichten zu definieren, bevor wir sie ohne Stilzuweisungen verwenden.
@layer base {
@layer support;
}
Zuweisung von Regeln zu Schichten mit Verschachtelung
Hier weist der .foo-Selektor seine Regeln der **Base** @layerzu. Die verschachtelte **Support**@layererstellt diebase.support-Unterschicht, und der &-Verschachtelungsselektor wird verwendet, um die Regeln für den .foo .bar`-Selektor zu erstellen.
.foo {
@layer base {
block-size: 100%;
@layer support {
& .bar {
min-block-size: 100%;
}
}
}
}
Äquivalent ohne Verschachtelung
@layer base {
.foo {
block-size: 100%;
}
}
@layer base.support {
.foo .bar {
min-block-size: 100%;
}
}