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

这可以通过在CSS

中设置锚标记样式来完成

a {
 // Your unvisited link
}

a:hover {
  // When hovering the link
}

a:visited {
  // When hovering the link
}

Answer 2

有一个CSS选择器。添加：

a,
a:visited {
}

到你的CSS为访问和＆＃34;未访问的＆＃34;设置相同的样式链接。 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;
}

未访问的链接看起来不对

4 个答案: