未访问的链接看起来不对

Question

第一次在这里发帖，如果我问了一些非常愚蠢的问题，请不要评判我，但我几天前才开始使用 CSS。

我的问题是（如您在此处看到的： www.silente.info ），当您已经访问过一个链接时，它看起来会有所不同。它看起来像我想要的样子，但我希望未访问的链接看起来一样。所以基本上我试图使未访问的链接看起来像已访问。

我只是找不到可能把它搞砸的地方。所以我注册了，我正在寻求帮助。 :)

编辑： 我知道标签的作用，但基本上我整个块的 0.5 不透明度（不悬停时）仅适用于访问过的链接。我希望避免答案告诉我使用我已经在我已经提供的 css 中使用的东西。 :)

这是我的 CSS（是的，一团糟）。 之后你可以找到我的 HTML。

/* FROM TEST.CSS */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{margin:0}
table{border-collapse:collapse;border-spacing:0;width:100%;display:table}
/* END OF TEST.CSS ??*/

table,th,td,.playertable,.playerth,.playertd,.headertable,.headerth,.headertd
{
  text-align: center;
  vertical-align: middle;
  table-layout: fixed;
  color: #603D9A;
  font: 16px/26.4px Helvetica,sans-serif!important
}

tr
{
  display: table;
  width: 100%
}

td
{
  display: inline-table;
  width: 25%
}

.bgcolor1
{
  background-color: #603D9A;
  background: #603D9A
}

.color1
{
  color: #603D9A;
}

:link,:visited
{
  text-decoration: none;
}

:hover,:active,
{
  color: #000;
}

.navbartable
{
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  font-family: Helvetica,sans-serif!important;
  font-size: 16px;
  line-height: 26.4px;
  font: 700 16px/26.4px Helvetica,sans-serif!important
}

.navbar
{
  margin: 0 auto;
  width: 600px;
  height: 28px;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row;
  border-radius: 0 0 30px 30px;
  border-bottom: 1px solid rgba(96,61,154,0.2);
}

.navbar div
{
  margin: 0 auto;
  font-weight: bold;
}

.website
{
  top: 100px;
  width: 100%;
  min-height: 100%;
  background: -webkit-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7));
  background: -o-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7));
  background: -moz-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7));
  background: linear-gradient(rgba(100,0,255,0.03),rgba(0,0,255,0.2));
  margin: 0 auto;
}

.hovertitle
{
  opacity: .7;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

.hovertitle:hover
{
  opacity: 1;
  color: #603D9A;
}

.hoverbar
{
  opacity: .5;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  opacity: .5;
}

.hoverbar:hover
{
  opacity: 1;
  color: #603D9A;
  font-size: 23px!important;
}

.title
{
  width: 100%;
  height: 200px;
  margin: 0 auto;
  /* START COMMENT HERE TO REMOVE TEXT */
  padding-top: 100px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline!important;
  letter-spacing: -3px;
  text-decoration: none;
  font-size: 32px!important;
  font-style: normal!important;
  font-variant: normal!important;
  font: 700 32px Helvetica,sans-serif!important;
  /* END COMMENT HERE TO REMOVE TEXT */

  /* GRADIENT
    background-image: url("http://i.imgur.com/tIYpwnu.png");
    background: -webkit-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7));
    background: -o-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7));
    background: -moz-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7));
    background: linear-gradient(rgba(0, 0, 255, 0.1), rgba(255, 255, 255, 0.7));
*/
/* IMAGE
  background-image: url("http://i.imgur.com/tIYpwnu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
*/
}

.body
{
  width: 95%;
  padding-top: 50px;
  margin: 0 auto;
}

.footerpadding
{
  height: 50px;
}

.footer
{
  text-align: center;
  width: 100%;
  height: 110px;
  color: #FFFFFF;
  margin: 0 auto;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  font-family: Helvetica,sans-serif!important;
}

ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li
{
  float: left;
}

a:hover,a:active
{
  color: #000;
}

.playertr
{
  display: table;
  width: 100%
}

.playertd
{
  display: inline-table
}

.headertr
{
  display: table;
  width: 100%
}

.headertd
{
  display: inline-table;
  width: 25%;
}

.chatdiv
{
  position: relative;
  padding-bottom: 132%;
  height: 0
}

.chatdiv iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.playerdiv
{
  position: relative;
  padding-bottom: 56.25%;
  height: 0
}

.playerdiv iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.player
{
  width: 70%
}

.chat
{
  width: 30%
}

HTML：

<html>
<title>Silente Portfolio</title>
<head>
<link rel="stylesheet" type="text/css" href="http://nedsteel.bg/!SILENTE/main.css">
<link rel="icon" href="http://nedsteel.bg/!SILENTE/favicon.png" type="image/gif" sizes="16x16">
<style></style>
</head>
<body>
<div class="website">

  <div class="title color1 hovertitle">
  <a href="http://silente.formyjob.net/">Silent_Entertainment</a>
  </div>

<div class="navbar color1">
  <table class="navbartable color1 headertable">
    <tr class="headertr">
     <td class="headertd"><div class=hoverbar><a href="http://who.silente.info">Who am I</a></div></td>
     <td class="headertd"><div class=hoverbar><a href="#works">My Works</a></div></td>
     <td class="headertd"><div class=hoverbar><a href="#clients">Clients</a></div></td>
    <td class="headertd"><div class=hoverbar><a href="#Contact">Contact</a></div></td>
   </tr>
  </table>
</div>

<div class="body color1">
<table cellpadding="20">
  <tr>
    <td>
   Lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. Ne qui omnis aliquip sadipscing, duo ei velit molestie. Ne vix blandit evertitur maiestatis. Et omnium philosophia sit, ius etiam integre corrumpit ea. Nec oratio menandri 

   </td><td>
   Lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. Ne qui omnis 

   </td><td>
   Lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. Ne qui omnis aliquip sadipscing, duo ei vel

   </td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>






    </div>
  <div class="footerpadding"></div>
</div>
    <div class="footer bgcolor1">
      <a href="http://facebook.com/silentepage"><img src="http://nedsteel.bg/!SILENTE/footer1.png"></a>
      <a href="http://youtube.com/iesdi"><img src="http://nedsteel.bg/!SILENTE/footer4.png"></a>
      <a href="http://twitch.tv/iesdise"><img src="http://nedsteel.bg/!SILENTE/footer3.png"></a>
      <a href="http://twitter.com/Iesdi_SE"><img src="http://nedsteel.bg/!SILENTE/footer2.png"></a>
        <font size="1"></br></br><a href="http://nedart.bg">&#169;2015 NedArt</a> for &#169;Silent Entertainment.</br>
        <a href="http://silente.formyjob.net/">www.SILENTE.info</a> All rights reserved.</font>
    </div>
<p hidden><span style="font-size: 0px;"><a href="http://www.forumotion.com">forumotion.com</a></span></p>
</body>
</html>

Answer 1

当您按 F12 并检查受影响的元素时，您应该注意到这一点：

a:-webkit-any-link{
text-decoration: underline;
}

所以也许添加以下行可能会对您有所帮助：

a, a:-webkit-any-link{
text-decoration:none;
}

Answer 2

好的，我明白了。而不是这样做：

.color1
{
  color: #603D9A;
}

<div class="navbar color1">

我应该这样做的：

a,
a:visited
{
  color: #603D9A;
  text-decoration: none;
}

由于某种原因，color1 仅适用于访问过的链接，当没有任何东西告诉未访问过的链接不要采取它的效果时，它是固定的。

Answer 3

有一个 CSS 选择器。添加：

a,
a:visited {
}

到您的 CSS 为已访问和“未访问”链接设置相同的样式。 Here 是有关此的更多信息。

Answer 4

这可以通过在 CSS 中设置锚标记来完成

a {
 // Your unvisited link
}

a:hover {
  // When hovering the link
}

a:visited {
  // When hovering the link
}