嘿，这个问题我之前踩过坑！本质是CSS选择器优先级在搞鬼，咱们一步步理清楚：

问题原因 #

当你直接用edge这个基础选择器设置line-color时，它的优先级会比你点击节点后动态添加的高亮样式（比如类选择器.highlight）要高。浏览器渲染时会优先选择优先级更高的样式，所以你的高亮颜色就被默认的边颜色覆盖了，看起来像是没生效。

解决方案 #

这里有几个靠谱的解决办法，按推荐程度排序：

1. 用类分离默认样式和高亮样式（最推荐） #

别直接给edge设置颜色，而是定义一个默认类来管理基础样式，高亮样式用另一个类来控制。这样两个类的优先级相同，后面添加的高亮类就能覆盖默认类的样式。

示例代码：

/* 默认边样式 */
.edge-default {
  line-color: #666;
}

/* 高亮边样式 */
.edge-highlight {
  line-color: #ff4444;
}

然后在你的图配置里，给所有边默认加上class: 'edge-default'属性。当点击节点时，给目标出边添加edge-highlight类即可。

2. 提高高亮样式的选择器优先级 #

如果不想改默认样式的写法，就把高亮样式的选择器写得更具体，让它的优先级超过基础的edge选择器。比如给高亮样式加上元素选择器前缀：

/* 默认边颜色 */
edge {
  line-color: #666;
}

/* 高亮样式（优先级更高） */
edge.edge-highlight {
  line-color: #ff4444;
}

这样edge.edge-highlight的优先级比单纯的edge高，就能顺利覆盖默认颜色了。

3. 避免在默认样式里用!important #

如果你之前在默认边样式里加了!important，那就算是行内样式也很难覆盖它。所以尽量别用!important来设置默认颜色，把它留给真正需要强制覆盖的场景（比如高亮样式）。

小提示 #

最后记得检查一下：点击节点时，是不是真的给目标边正确添加上了高亮类/行内样式？可以用浏览器的开发者工具（F12）查看边元素的样式，看看高亮样式有没有被划掉（被覆盖的标志），这样能快速定位问题。

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