Most CSS selectors can be used to select SVG elements. In addition to the general type,class and ID selectors,SVGs can be styled using CSS2’s dynamic pseudo-classes (:hover,:active and :focus) and pseudo-classes (:first-child,:visited,:link and :lang. The remaining CSS2 pseudo-classes,including those having to do with generated content (such as ::before and ::after),are not part of the SVG language definition and,hence,have no effect on the style of SVGs.
这篇作者在网上有很多文章,看起来非常有见识.然而,“剩余的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：第n个孩子伪类在这里工作得很好(填充第二个矩形红色).另一个例子：用另一个CSS3伪类选择符替换上面的第n个子规则：a：not rule(其余的都保持不变)：
rect:not([x="110"]) { fill:red } // fills the 1st rectangle red
我找到了this reference,但并没有帮助我.
CSS3伪类与SVG元素的兼容性是什么？
注意：我假设这些伪类规则只适用于SVG renderable elements.
解决方法
我将不同的SVG元素定义在两个不同的组(两个父元素,笔中显示为两列),以适应所有选择不同种类的子类的伪类：
<svg width="450" height="300">
<g transform="translate(5,5)">
<rect x="0" y="0" width="25" height="25" />
<rect x="0" y="40" width="25" height="25" />
<rect x="0" y="80" width="25" height="25" />
<circle cx="15" cy="132" r="13.5"/>
<circle cx="15" cy="170" r="13.5"/>
<polygon points="2,200 28,200 14,225"/>
<rect x="0" y="240" width="25" height="25" />
</g>
<g transform="translate(5,5)">
<rect x="220" y="0" width="25" height="25" />
</g>
<g transform="translate(5,5)" font-family="Verdana" font-size="16" fill="#444">
<text x="40" y="20" >:root</text>
<text x="40" y="60">:nth-child(2)</text>
<text x="40" y="100">:nth-of-type(3)</text>
<text x="40" y="140">:first-of-type</text>
<text x="40" y="180">:nth-last-of-type(1)</text>
<text x="40" y="220">:only-of-type,:last-of-type</text>
<text x="40" y="260">:nth-last-child(1),:last-child</text>
<text x="260" y="20">:only-child,:last-child</text>
</g>
</svg>
有趣的发现：
>：root似乎工作.如预期的那样,它将应用于文档中的所有元素,包括svg元素.
>因为：空被应用于所有void svg元素(< rect>,< circle>,< ellipse>,< polygon>等),它是用于定位SVG形状元素的便利选择器.
