CSS3伪类与SVG可渲染元素的兼容性是什么？

Question

我一直在学习SVG并且发现了这篇内容丰富的文章.作者说

大多数CSS选择器可用于选择SVG元素.除了通用类型,类和ID选择器之外,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伪类在这里工作得很好(填充第二个矩形红色).另一个例子:用另一个CSS3伪类选择器替换上面的:nth-​​child规则,a :not rule(所有其他保持不变):

rect:not([x="110"]) { fill:red } // fills the 1st rectangle red

我找到了这个参考,但它对我没有帮助.

CSS3伪类与SVG元素的兼容性是什么？

注意:我假设这些伪类规则仅适用于SVG 可渲染元素.

Answer 1

以下是选择器级别3编辑器草稿中定义的CSS3伪类选择器的完整列表,其中带有粗体links的选项与SVG兼容:

• :target,选择通过片段标识符定位的元素
• :root,选择html具有更高特异性的文档的根,即标记
• :nth-child(an+b),an+b-1在文档树中选择具有兄弟姐妹的元素
• :nth-of-type(an+b),选择an+b-1在文档树中具有相同元素名称的具有兄弟元素的元素
• :nth-last-of-type(an+b),an+b-1在文档树中选择具有相同元素名称的兄弟姐妹后面的元素
• :last-child,选择任何父元素的最后一个子元素
• :first-of-type,选择父母子女的第一个兄弟姐妹
• :last-of-type,选择父类子元素类型的最后一个兄弟
• :only-child,选择具有不包含其他子元素的父元素的元素
• :only-of-type,选择具有父元素的元素,该元素没有具有相同元素名称的其他子元素
• :empty,选择根本没有孩子的元素
• :not(X),选择未被选择器选择的元素X,这是一个简单的选择器

这些是定义的,但草案中没有语义含义:

• :enabled
• :disabled
• :checked
• :indeterminate

上面给出了HTML5规范中的含义,以及其他伪类的一些其他定义.

总之,似乎所有CSS3伪类都工作,除了:root.您可以在MDN文档中阅读有关伪类的更多信息.我找不到描述兼容性的可靠资源,所以这一切都是通过测试确定的.CSS3中没有定义其他伪类或伪元素.

Answer 2

这是一支笔fill，通过将或属性应用于 SVG 可渲染元素，演示了 CSS3 伪类选择器的完整列表（由 @andrewli 概述）在 SVG 上的应用stroke。

我在两个不同的组中定义了不同的 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 元素。
• 由于:empty应用于所有void svg 元素（<rect>、<circle>、<ellipse>、<polygon>等），因此它是一个用于定位 SVG 形状元素的便捷选择器。