CSS ^=前缀属性选择器规则无法被JS设置的行内样式覆盖如何解决？

问题原因 #

核心原因是样式优先级和SVG属性兼容性两点：

1. 属性选择器g[id^='mod']的优先级为11（1分元素选择器+10分属性选择器），理论上低于行内样式的1000分，正常可以被行内样式覆盖，但你JS中设置的display: block不是SVG元素的标准有效值，部分浏览器会直接忽略该赋值，导致显示逻辑失效。
2. 部分老旧浏览器对内联SVG中使用属性选择器匹配元素存在兼容问题，会导致样式覆盖计算异常。
   而你换成具体ID选择器g#mov1-0时，优先级为101分（1分元素选择器+100分ID选择器），浏览器对ID选择器的SVG匹配兼容性更好，因此JS行内样式可以正常覆盖，功能正常运行。

解决方案 #

完全可以保留两行CSS的简洁写法，按以下方案调整即可：
首先保留原有CSS规则不变：

g[id^='mod'] { display: none; }
g[id^='mov'] { display: none; }

调整JS中的显示逻辑，将display: block替换为SVG兼容的有效值：

function mov(x, c){
  var obj_id = 'mov' + c + '-' + x;
  var obj = document.getElementById(obj_id);
  // 使用unset或者inline适配SVG元素的display属性
  obj.style.display = 'unset';
  // 如果仍不生效可以强制提升行内样式优先级：
  // obj.style.setProperty('display', 'unset', 'important');
}

如果上述调整后仍不生效，可以将CSS选择器去掉元素限定，进一步优化匹配精度：

[id^='mod'], [id^='mov'] {
    display: none;
}

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