为什么 a:visited 字体颜色会覆盖链接的字体颜色？有没有办法获得链接的原始颜色？
nav {
display: table;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
nav > ul {
display: table-row;
}
nav > ul > li {
display: table-cell;
}
header > nav > ul > li > a:link {
color: #eeda11;
}
header > nav > ul > li > a:visited {
color: rgb(71, 235, 16);
}
header > nav a:hover, header > nav a:active {
background-color: rgba(133, 43, 243, 0.89);
}
header > nav > ul > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #eeda11;
display: block;
margin-right: 10px;
margin-left: 10px;
}<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Kitchen Bar</a></li>
<li><a href="#">Contacts</a></li>
<li> <span id="searchIcon"><img src="images/searchBar.png" width="20px"
alt="Search Bar"></span>
</li>
</ul>
</nav>回答1
有2个问题：
提供的代码中没有
<header>。在
nav之后，你忘记了>，所以你得到了nav a:hover
nav > a:hover, header > nav a:active {
background-color: rgba(133, 43, 243, 0.89);
}工作片段：
nav {
display: table;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
}
nav > ul {
display: table-row;
}
nav > ul > li {
display: table-cell;
}
nav > ul > li > a:link {
color: #eeda11;
}
nav > ul > li > a:visited {
color: rgb(71, 235, 16);
}
nav > a:hover, header > nav a:active {
background-color: rgba(133, 43, 243, 0.89);
}
nav > ul > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #eeda11;
display: block;
margin-right: 10px;
margin-left: 10px;
}<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Kitchen Bar</a></li>
<li><a href="#">Contacts</a></li>
<li> <span id="searchIcon"><img src="images/searchBar.png" width="20px"
alt="Search Bar"></span>
</li>
</ul>
</nav>