Я изучаю SVG и встретил эту информативную статью. Автор утверждает, что
Большинство селекторов CSS могут использоваться для выбора элементов SVG. В дополнение к общим типам, селекторам классов и идентификаторов, SVG могут быть созданы с использованием динамических псевдоклассов CSS2 (: hover,: active и: focus) и псевдоклассов (: first-child,: visited,: link и: lang Остальные псевдоклассы CSS2, в том числе связанные с созданным контентом (такие как:: before и:: after), не являются частью определения языка SVG и, следовательно, не влияют на стиль SVG.
У этого автора есть много статей в Интернете и он очень хорошо осведомлен. Однако утверждение "оставшиеся псевдоклассы CSS2.... не влияют на стиль SVG" заставляет задуматься о псевдоклассах CSS3. Возьмем этот пример, который я сгенерировал на Codepen (FF в качестве браузера).
<svg width="220" height="220" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" />
<rect x="110" y="110" width="100" height="100" />
</svg>
<style>
svg { border: 3px dashed #999 }
svg > rect:hover { fill: green }
rect:nth-child(even) { fill:red }
</style>
Псевдокласс CSS3 : nth-child отлично работает здесь (заполняет второй прямоугольник красным). Другой пример: замените правило : nth-child выше с другим селектором псевдокласса CSS3, правилом : не (все остальное остается тем же):
rect:not([x="110"]) { fill:red } // fills the 1st rectangle red
Я нашел эту ссылку, но мне это не помогает.
Какова совместимость псевдоклассов CSS3 с элементами SVG?
Примечание. Я предполагаю, что эти правила псевдокласса применимы только к SVG отображаемым элементам.