CSS通用选择器作用于SVG时hover颜色失效原因咨询

问题场景 #

当使用#btnRepeat:hover选择器时，SVG图标能正常在hover状态切换颜色；但将hover选择器改为通用形式svg[id^="btn"]:hover后，仅光标样式生效，颜色不再变化。

相关代码 #

HTML代码

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <g id="repeat">
    <path fill="currentColor"
      d="M20.3 13.43a1 1 0 0 0-1.25.65A7.14 7.14 0 0 1 12.18 19A7.1 7.1 0 0 1 5 12a7.1 7.1 0 0 1 7.18-7a7.26 7.26 0 0 1 4.65 1.67l-2.17-.36a1 1 0 0 0-1.15.83a1 1 0 0 0 .83 1.15l4.24.7h.17a1 1 0 0 0 .34-.06a.33.33 0 0 0 .1-.06a.78.78 0 0 0 .2-.11l.09-.11c0-.05.09-.09.13-.15s0-.1.05-.14a1.34 1.34 0 0 0 .07-.18l.75-4a1 1 0 0 0-2-.38l-.27 1.45A9.21 9.21 0 0 0 12.18 3A9.1 9.1 0 0 0 3 12a9.1 9.1 0 0 0 9.18 9A9.12 9.12 0 0 0 21 14.68a1 1 0 0 0-.7-1.25Z" />
  </g>
</svg>
<svg id="btnRepeat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="button">
  <use href="#repeat"></use>
</svg>

原CSS代码

:root {
  --norm-colour: green;
  --high-colour: red;
}

#btnRepeat {
  position: absolute;
  width: 15%;
  color: var(--norm-colour);
}

/* 此选择器可正常生效 */
#btnRepeat:hover {
  color: var(--high-colour);
  cursor: pointer;
}

/* 此选择器仅cursor生效，颜色无变化 */
/* svg[id^="btn"]:hover {
  color: var(--high-colour);
  cursor: pointer;
} */

失效原因 #

核心是CSS选择器优先级冲突：

• #btnRepeat是ID选择器，优先级权重为100；
• svg[id^="btn"]是元素+属性选择器，优先级权重为11。

当使用svg[id^="btn"]:hover时，它的优先级（21，hover伪类额外加10）远低于ID选择器#btnRepeat的优先级（100）。因此，hover状态设置的color会被基础样式中ID选择器定义的color: var(--norm-colour)覆盖，只有cursor属性因无冲突而生效。

解决方法 #

方法1：统一选择器类型 #

将基础样式也改为属性选择器，让基础样式和hover样式优先级一致：

:root {
  --norm-colour: green;
  --high-colour: red;
}

svg[id^="btn"] {
  position: absolute;
  width: 15%;
  color: var(--norm-colour);
}

svg[id^="btn"]:hover {
  color: var(--high-colour);
  cursor: pointer;
}

方法2：提升hover选择器优先级 #

保留原基础样式的ID选择器，同时提升hover选择器的优先级：

#btnRepeat:hover,
svg[id^="btn"]:hover {
  color: var(--high-colour);
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Andrew Foulds