0

我是编程新手，这是我的第一篇文章（刚刚注册！）。首先，这是一个学校作业，但我想要完成的不是必需的；我只是觉得这个问题很有趣。我未能在其他地方找到答案，但如果我错过了，我很抱歉。好的，所以我的 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>）内嵌样式，但我不确定如何捕获链接的所有状态（即链接、已访问、悬停、活动）。

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

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

谢谢！

4

1 回答 1

0

最简单的方法是将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;
}

有用的文档：选择器解释，所有选择器

于 2021-03-14T08:55:28.793 回答