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

Posted 2023-02-21

【中文标题】无法使用插入符号选择器覆盖 CSS 指令

【英文标题】：Can't override CSS directive with caret selector

【发布时间】：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-0display:none;
g#mod1-0display:none;

为什么会这样？

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

注意 SVG 是由 Adob​​e 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更容易弄清楚。

【参考方案1】：

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

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

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

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

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

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