CSS部分匹配类选择器无法定位相邻兄弟text元素求助

嘿，我来帮你搞定这个头疼的问题！首先咱们得拆解一下可能的原因，再一步步解决：

首先，排查最容易忽略的点：SVG文字颜色用fill而非color #

你要修改的是SVG里的<text>元素，它的文字颜色是通过fill属性控制的，不是普通HTML元素的color属性。哪怕你选对了元素，用color: white也不会生效，这是很多人踩过的坑！

然后，确认选择器的hover状态绑定位置 #

你需要的是当path被hover时修改text的样式，所以必须把:hover绑定在path选择器上，这是之前写法可能遗漏的关键点！

情况1：path和text是直接紧邻的兄弟元素（中间没有其他DOM节点）

如果你的DOM结构是这样的：

<path class="fillSelection-upset-abc123" ... />
<text class="valueTextStyle-upset-xyz456" ... />

那用+相邻兄弟选择器就能生效，正确的CSS写法是：

path[class^='fillSelection-upset-']:hover + text[class^='valueTextStyle-upset-'] {
  fill: white;
}

情况2：path和text之间有其他元素（比如<title>、<desc>或者其他辅助元素）

如果中间夹了其他节点，+就只能选紧接的第一个兄弟，这时候要用~通用兄弟选择器，它能匹配path后面所有符合条件的text兄弟：

path[class^='fillSelection-upset-']:hover ~ text[class^='valueTextStyle-upset-'] {
  fill: white;
}

情况3：path和text属于同一个父容器的子元素，但不在同一层级（比如各自嵌套在<g>里）

如果DOM结构是这样的：

<g class="group-upset-789">
  <path class="fillSelection-upset-abc123" ... />
</g>
<g class="text-group-upset-012">
  <text class="valueTextStyle-upset-xyz456" ... />
</g>

这时候兄弟选择器就失效了，因为path和text的父元素才是兄弟。你需要找到它们的共同父元素，用父元素的hover状态来控制text：

/* 假设共同父元素是某个带有特定前缀的g容器 */
g[class^='chart-container-upset-']:hover text[class^='valueTextStyle-upset-'] {
  fill: white;
}

或者如果父元素没有可匹配的类，也可以用:has()选择器（现代浏览器均支持）定位包含目标path的父元素：

g:has(path[class^='fillSelection-upset-']):hover + g text[class^='valueTextStyle-upset-'] {
  fill: white;
}

最后验证步骤 #

1. 打开浏览器开发者工具，选中目标path元素，确认它的类名确实以fillSelection-upset-开头
2. 检查text元素的位置，看它和path的DOM层级关系
3. 在开发者工具的CSS面板里测试上述选择器，看是否能选中目标text元素
4. 确保用的是fill: white而不是color: white

内容的提问来源于stack exchange，提问作者Rockwell Rice