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

Question

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

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

正文中是 <section>，其中包含容器文本和 hyperlinks。

不幸的是，生成的地图的缩放按钮“+”和“-”也显示为金色，我从 Chrome DevTools 中看到按钮也使用 a:link，以及我的颜色以上 a:link，已自动应用于按钮。我希望“+”和“-”保持黑色（默认）。

有办法吗？是因为传单电话吗？我会考虑在写入容器内容的 <body> 中进行内联样式设置（例如 <p><a href="...">Click Here</a></p>），但我不确定如何捕获 link 的所有状态（即link，已访问，悬停，活跃）。

再次抱歉，如果我遗漏的其他地方已经解决了这个问题，如果有人能指导我，我将不胜感激。

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

谢谢！

Answer 1

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

在您的 html 中，向 section 元素添加 class 或 ID：<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

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

How do I change the color of links in a leaflet container, without changing the zoom buttons' color

button

colors

hyperlink

leaflet

zoom-sdk