Can ::第一个字母的CSS可以处理SVG中的<text>元素吗？

Question

据我所知，CSS3 ::first-child伪元素选择器不适用于SVG内的文本。

我的尝试就是这个小提琴https://jsfiddle.net/tobek/d334vdb5/，在最新的Chrome和Firefox（在Linux上）上对我没用。这是完整的代码：

HTML：

<div class="html-text">Watermelon</div>

<svg width="400" height="50">
  <text x="0" y="50" font-size="50">Watermelon</text>
</svg>

CSS：

.html-text {
  font-size: 50px;
  color: green;
}
.html-text::first-letter {
  color: red;
}

svg text {
  fill: green;
}
svg text::first-letter {
  fill: red;
  color: red;
}

这会产生：

搜索了有关此内容的具体信息，但无法找到。如果它实际上是不可能的，那么对于SVG中的文本元素不起作用的CSS有什么更一般的规则吗？

Answer 1

根据specs for SVG 1.1 _{（强调我的）}

  

CSS2的动态伪类：hover，：active和：focus和伪类：first-child，：visited，：link和：lang（[CSS2]，第5.11节）。 剩余的CSS2伪类，包括那些与生成内容有关的内容（[CSS2]，第12章），不属于SVG语言定义。

所以不，::first-letter不应该在svg上工作。

请注意，您可以使用<tspan>元素和:first-child选择器来解决此问题。

.html-text {
  font-size: 50px;
  color: green;
}
.html-text::first-letter {
  color: red;
}

svg text {
  fill: green;
}
svg text :first-child {
  fill: red;
  color: red;
}

<div class="html-text">Watermelon</div>

<svg width="400" height="50">
  <text x="0" y="50" font-size="50"><tspan>W</tspan>atermelon</text>
</svg>