时间戳

首页 > 解决方案 > 无法弄清楚为什么“已访问样式”不适用于链接

html - 无法弄清楚为什么“已访问样式”不适用于链接

问题描述

有一个带有“about”类的链接“a”项目，我正在尝试创建一种访问过的紫色风格。但由于某种原因，它不是“已访问”样式的样式。谢谢你！

**html**

<header>
  <a href="about.html" class="about">ABOUT</a>
</header>

**css**

 a {  
  font-family: Gothic A1;
  font-size: 18px;
  text-decoration: none;
  color: #000000;
}

about a:visited {
 color: purple;
}
 

**hover animation**

a.about {
  position: relative;
}

a.about:before {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0px;
  background: black;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.about:hover:before {
 visibility: visible;
 width: 100%;
}

标签： htmlcsshyperlink

解决方案

应该是a.about:visited，不是about a:visited。

about a查找作为元素子元素的所有锚标记about。 a.about查找about该类的所有锚标记。

 a {  
  font-family: Gothic A1;
  font-size: 18px;
  text-decoration: none;
  color: #000000;
}

a.about:visited {
 color: purple;
}
 

a.about {
  position: relative;
}

a.about:before {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0px;
  background: black;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.about:hover:before {
 visibility: visible;
 width: 100%;
}
<header>
  <a href="about.html" class="about">ABOUT</a>
</header>

推荐阅读