css - 单击链接时出现 :visited dont work, 差异颜色

Question

当您看到网站时 http://colin.amsterdam你会在顶部看到社交链接，当你点击它时(Facebook 和 Instagram 链接)它又变成了蓝色。在 CSS 中，我为 a:visited 设置了黄色，但它不起作用。任何想法？

body {
	background-color: #0d2481;
	margin: 0;
	padding: 0;
	font-family: 'Contrail One', cursive;
	font-size: 20px;
	overflow-x: hidden;
}

img {
	border: 0;
}

.main {
	width: 50%;
	float: left;
	text-align: right;
	font-family: 'Contrail One', cursive;
	color: #ffdb30;
}

.main a:link, a:visited, a:hover, a:active {
	color: #ffdb30;
	text-decoration:none;
}

.main-head {
	font-family: 'Contrail One', cursive;
	color: #ffdb30;
	font-size: 80px;
}

.aside {
	height: 100%;
	background-color: #ffdb30;
	width: 50%;
	float: right;
	font-family: 'Contrail One', cursive;
	color: #0d2481;
}

.aside a:link, a:visited, a:hover, a:active {
	color: #0d2481;
	text-decoration:none;
}

.aside-head {
	font-family: 'Contrail One', cursive;
	color: #0d2481;
	font-size: 80px;
}

.space {
	height:20px;
}

.clearfix:after {
	content:"";
	display:table;
	clear:both;
}

Answer 1

你应该检查你的规则。

此处将颜色设置为黄色:.main a:link, a:visited, a:hover, a:active

在这里你将它设置为蓝色:.aside a:link, a:visited, a:hover, a:active.

如果您想以不同的方式设置每个链接的样式，您需要在每个规则之前添加 class，如下所示:

/* Color for every link */
a:link, 
a:visited, 
a:hover, 
a:active {
  color: red;
}
/* Color for every link ONLY in .main */
.main a:link, 
.main a:visited, 
.main a:hover, 
.main a:active {
  color: blue;
}
/* Color for every link ONLY in .aside */
.aside a:link, 
.aside a:visited,
.aside a:hover, 
.aside a:active {
  color: yellow;
}

<a href="#">Testlink</a>
<div class="main"><a href="#">Testlink with main</a></div>
<div class="aside"><a href="#">Testlink with aside</a></div>