Вложенное объявление CSS с псевдоклассами в теге стиля svg не работает ⇐ CSS

[Anonymous]

У меня есть и SVg, и я добавляю тег внутри svg, использую вложенный синтаксис описания CSS, а при использовании & выдает ошибку какой-то ошибки XML;
сначала посмотрите этот пример html

Код: Выделить всё

: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;
}
svg {
.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;
}
}

это работает, и если мы удалим & вперед, к :nth -child тогда не работает должным образом;
теперь то же самое можно попробовать и в svg (и мое требование - каждый нечетный прямоугольник будет синим, а в противном случае - красным (примечание: фоновый цвет заменить заливкой )

Код: Выделить всё

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

}

выше: :nth-child не работает, как и &:nth-child
хотя и меняется навигация, тогда это работает

Код: Выделить всё

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

но затем добавление & вперед к nth-child, это не работает и ничего не показывает в браузере
поэтому мой вопрос< /p>

[*]вложенность CSS не работает должным образом в теге стиля svg
[*]почему добавление селектора nth-child в родительский svg< /code> работает, но не на .card


Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-working