如何在不更改缩放按钮颜色的情况下更改传单容器中链接的颜色答案

【问题标题】：How do I change the color of links in a leaflet container, without changing the zoom buttons' color如何在不更改缩放按钮颜色的情况下更改传单容器中链接的颜色
【发布时间】：2021-06-11 19:20:55
【问题描述】：

我是编程新手，这是我的第一篇文章（刚刚注册！）。首先，这是一个学校作业，但我想要完成的不是必需的；我只是觉得这个问题很有趣。我未能在其他地方找到答案，但如果我错过了，我很抱歉。好的，所以我的 HTML 链接到 Leaflet.js 和 Leaflet.css。该网页包括地图以及容器（文本框）中的几个链接。我需要为此容器中的链接使用非默认颜色，因此我包括以下内容：

<head>
<style>
section {
    (styling for the container)
}
a:link {
    color:gold;
}
a:visited {
    color:pink;
}
...

在正文中是<section>，我有容器文本和超链接。

不幸的是，生成的地图的缩放按钮“+”和“-”也显示为金色，我从 Chrome DevTools 中看到这些按钮也使用 a:link，并且应用了我上面为 a:link 设置的颜色自动到按钮。我希望“+”和“-”保持黑色（它们的默认值）。

有没有办法做到这一点？是因为传单调用吗？我会考虑在写入容器内容的<body> 中内嵌样式（例如<p><a href="...">Click Here</a></p>），但我不确定如何捕获链接的所有状态（即链接、已访问、悬停、活动） .

再次，如果我错过了在其他地方解决了这个问题，我很抱歉，如果有人能指导我到那里，我将不胜感激。

我的下一个选择是滚动它并尝试更改缩放按钮的背景颜色，这样至少金色的“+”和“-”会有更好的对比度。

谢谢！

【问题讨论】：

标签： button colors hyperlink leaflet zoom-sdk

【解决方案1】：

最简单的方法是将a 样式仅应用于该部分的子项。

在您的 html 中将类或 id 添加到 section 元素：<section id="wrapper">，然后仅将样式应用于 #wrapper 子元素：

#wrapper {
    (styling for the container)
}
#wrapper a:link {
    color:gold;
}
#wrapper a:visited {
    color:pink;
}

另一种方法是覆盖缩放按钮样式：

.leaflet-control-zoom  a:link, .leaflet-control-zoom  a:visited {
   color: black;
}

有用的文档：Selectors Explained、All Selectors

【讨论】：

感谢您的这些建议，它们都奏效了！