大佬教程收集整理的这篇文章主要介绍了CSS3伪类与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：第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形状元素的便利选择器.
以上是大佬教程为你收集整理的CSS3伪类与SVG可渲染元素的兼容性是什么？全部内容，希望文章能够帮你解决CSS3伪类与SVG可渲染元素的兼容性是什么？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。