Google Chrome中锚标签:link伪类样式不生效问题咨询

核心原因是：你的锚标签使用了href="#"，Chrome会将其判定为已访问状态，因此:link（未访问链接）伪类不会匹配该元素，只有:visited（已访问链接）伪类会生效。

具体解释：

• href="#"指向当前页面的默认锚点（页面顶部），浏览器会认为这个锚点已经被你“访问”过（打开页面就相当于到达过该位置），所以不会触发:link的样式规则。
• 当你使用:visited时，正好匹配了浏览器标记的已访问状态，所以样式能正常显示。

解决办法：

• 方法一：替换占位链接
  如果你不需要跳转，只是用a标签做交互占位，可以把href改为javascript:void(0)，这样浏览器不会将其标记为已访问，:link伪类就能正常生效：

  <a class="main-anchor" href="javascript:void(0)">Anchor</a>
  

• 方法二：同时定义两种状态的样式
  直接为:link和:visited统一设置样式，确保无论链接是否被标记为已访问，都能应用你想要的效果：

  .main-anchor:link, .main-anchor:visited {
    color: black;
  }
  

内容的提问来源于stack exchange，提问作者xyz