同一个css类给了我两种不同颜色的文本

Question

试图学习这些东西，就在我以为我已经掌握了它的时候，这个问题突然出现了。我有两个按钮使用相同的类，但每个按钮的文本颜色不同

屏幕截图

.button {
margin: 10px;
padding-top: 10px;
color: black;
background-color: yellow;
border-radius: 10px;
}
.button a:link,
a:visited {
color: #000;
}
.button a:hover {
background-color: orange;
color: #000;
}

<div>
<button class="button"><a href="https://twitter.com/*hidden*">Find me on <img width="50" alt="Twitter" src="images/twitter.png" /></a></button>
<button class="button"><a href="https://www.facebook.com/*hidden*">Find me on <img width="50" alt="Twitter" src="images/twitter.png" /></a></button>
</div>

Twitter按钮"在">文本按设计为黑色，但Facebook按钮上的"在">文本为白色。我在这里错过了什么？(我试过只使用链接，没有HTML按钮，色差仍然存在。(

Answer 1

您指的是一个：已访问但不是。按钮a:已访问

因此，我"认为"你看到的不同颜色是浏览器访问的颜色，而不是你定义的颜色。

Answer 2

好的，发现了这个愚蠢的错误。我在检查时注意到链接颜色是从我的页脚继承来的。很明显，我在页面底部引用了一个结束div，不知怎么的，我仍然不明白页脚链接的css覆盖了我的按钮类。这对我来说很有道理，但我仍然不明白为什么它只影响了一个按钮。div正确关闭后，一切都很好。