Verschachtelte CSS-Deklaration mit Pseudoklassen im SVG-Stil-Tag funktioniert nicht ⇐ CSS

[Guest]

Ich habe ein SVg und füge ein Tag innerhalb von SVG hinzu und verwende eine verschachtelte CSS-Deklarationssyntax und wehn mit & es gibt den Fehler eines XML-Fehlers;
sehen Sie sich zuerst dieses HTML-Beispiel an

Code: Select all

:root {
--color-red: #FF5733;
}

div {
background-color: yellow;
.card {
border: 2px solid grey;
height:2rem;
width:2rem;
margin: 1rem;
background-color: var(--color-red);
&:nth-child(odd) {
background-color: blue;
}
}
}









Working SVG but not applying pseudo-class




:root {
--color-red: #FF5733;
}
rect {
.card {
fill: var(--color-red);
:nth-child(odd) {
fill: blue;
}
}

}




works when nested under svg `&` does not works




:root {
--color-red: #FF5733;
}
svg {
.card {
fill: var(--color-red);
}
:nth-child(odd) {
fill: blue;
}
}

was funktioniert und wenn wir & entfernen, gehen wir weiter zu :nth -child funktioniert dann nicht wie erwartet;
Jetzt dasselbe beim Versuch in SVG ( und meine Anforderung ist, dass jedes ungerade Rechteck blau und ansonsten rot ist ( Hinweis: Hintergrundfarbe durch Füllung ersetzen )

Code: Select all

:root {
--color-red: #FF5733;
}
svg {
.card {
fill: var(--color-red);
:nth-child(odd) {
fill: blue;
}
}

}

oben funktioniert :nth-child nicht und auch &:nth-child
obwohl die Navigation geändert wird, dann funktioniert es

Code: Select all

:root {
--color-red: #FF5733;
}
rect {
.card {
fill: var(--color-red);
}
:nth-child(odd) {
fill: blue;
}
}

aber wenn ich dann & vor dem n-ten Kind hinzufüge, funktioniert es nicht und es wird nichts im Browser angezeigt
also ist meine Frage< /p>

• Funktioniert die CSS-Verschachtelung im SVG-Stil-Tag nicht ordnungsgemäß?
• Warum funktioniert das Hinzufügen des n-ten untergeordneten Selektors zum übergeordneten SVG? /code> funktioniert, aber nicht auf .card