未访问的链接看起来不对

Question

首先 post 在这里，如果我问了一些非常愚蠢的问题，请不要批评我，但几天前我才开始使用 CSS。

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

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

编辑： 我知道标签的作用，但基本上我对整个块的 0.5 不透明度（当未悬停时）仅适用于访问的 links。我希望避免答案告诉我使用我已经在我已经提供的 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

这将通过在您的 CSS

中设置锚标记样式来完成

a {
 // Your unvisited link
}

a:hover {
  // When hovering the link
}

a:visited {
  // When hovering the link
}

Answer 2

有一个 CSS 选择器。添加：

a,
a:visited {
}

您的 CSS 可以为访问过的链接和 "unvisited" 链接设置相同的样式。 Here 是关于此的更多信息。

Answer 3

好的，我知道了。而不是这样做：

.color1
{
  color: #603D9A;
}

<div class="navbar color1">

我应该这样做的：

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

出于某种原因，color1 仅适用于访问过的链接，当没有任何内容告诉未访问过的链接不要使用它时，它也会起作用，但它是固定的。

Answer 4

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

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

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

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

未访问的链接看起来不对

Unvisited links looking wrong

html

css

fonts

colors

opacity