CSS/SCSS中颜色不生效求助：仅:visited伪类可正常应用颜色

问题原因 #

当注释掉:visited伪类后，仅:link伪类生效，但如果该链接处于**已访问（visited）**状态（比如href="#"指向页面内已存在的锚点，或之前点击过该链接），:link选择器不会匹配这个状态的链接，此时浏览器默认的:visited样式会覆盖你设置的黄色，导致颜色不生效。而启用:visited后，自定义样式会覆盖浏览器默认的已访问链接样式，所以颜色正常显示。

解决方案 #

有两种可行的处理方式：

方式1：同时启用:link和:visited伪类 #

确保两种状态的链接都应用自定义颜色样式，修改SCSS如下：

.footer {
   &__link {
        &:link,
        &:visited {
            color: yellow;
        }
   }
}

方式2：直接为链接元素设置样式（不依赖伪类） #

如果不需要区分访问状态，直接给.footer__link设置颜色，无论链接是否被访问，样式都会生效：

.footer {
   &__link {
        color: yellow;
   }
}

补充说明 #

浏览器对<a>标签的:link和:visited有默认样式优先级，只有明确指定对应伪类的样式，才能覆盖浏览器的默认规则。另外，href="#"的链接如果指向页面内已存在的锚点，浏览器可能会默认将其标记为已访问状态，这也是仅启用:link时样式不生效的常见场景。

内容的提问来源于stack exchange，提问作者Sunil Kumar Das