无法使用插入符号选择器覆盖 CSS 指令答案

【问题标题】：Can't override CSS directive with caret selector无法使用插入符号选择器覆盖 CSS 指令
【发布时间】：2021-11-20 10:34:17
【问题描述】：

我有一个包含大约 60 个按钮的 SVG 文件（内嵌在 HTML 页面中）。

它们每个都有两个额外的状态，每个状态都有一个形式的 ID：

<g id="mov0-1"><!-- mouseover state -->
<g id="mod0-1"><!-- mousedown state -->

最初，mouseover 和 mousedown 状态隐藏在 CSS 中：

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

当鼠标悬停时，状态应该改变，使用这个函数：

var obj = document.getElementById('link' + c + '-' + x);
obj.addEventListener('mouseover', mov.bind(null, x, c), false); 
...
function mov(x, c){
  var obj_id = 'mov' + c + '-' + x;
  var obj = document.getElementById(obj_id);
  obj.style.display = 'block';
}

上述功能失败。但是，如果我将 CSS 插入符号替换为单个按钮的列表，该功能有效：

g#mov1-0{display:none;}
g#mod1-0{display:none;}

为什么会这样？

有没有一种方法可以保留我优雅的两行解决方案，隐藏 120 个按钮，而不必单独列出它们？

注意 SVG 是由 Adobe Illustrator 自动生成的，我不能使用 CSS 类。

【问题讨论】：

您可以使用 JS 切换类。
当您说“功能失败”时，您究竟是什么意思？您是否可以在控制台中看到某种错误，或者它只是没有在视觉上更新样式？
Gert B，你能解释一下如何让这个类应用到我无法修改的 SVG 上吗？
tromgy，它只是无法更新样式。我尝试使用“block！important”，但没有奏效。我会做更多的研究，看看是否可以在任何地方找到错误消息。
I'm not sure what's really going on in here, But when a change in a selector fixes the issue suggests a specificity issue, If you could put up a working example for people to test out it would更容易弄清楚。

标签： javascript css dom css-selectors dom-events

【解决方案1】：

所以这是一个愚蠢的错误。

父对象也有以mov和mot开头的ID，所以当我隐藏未使用的按钮时，我也隐藏了它们的父容器。

第 1 课：小心使用通配符。

第 2 课：当出现问题时，不要认为是因为一些复杂的技术问题而不是愚蠢的错误。

第 3 课：构建一个简单的测试用例来重现问题。

重命名父容器（Illustrator 图层）解决了这个问题。

【讨论】：