CSS link伪类未生效：外部链接未应用红色样式求助

原因分析 #

你的CSS里的:link伪类有特定匹配规则，再结合浏览器的默认行为，导致第一个链接没变红：

• :link仅匹配未被访问过且带有非空href的链接。
• 第一个链接是外部地址，如果你之前访问过该网站，浏览器会把它标记为:visited状态，而你没给这个状态设置样式，所以它沿用了浏览器默认的已访问链接样式（通常是紫色），不会触发:link的红色规则。
• 第二个链接是未访问过的相对路径，符合:link的匹配条件，所以显示红色。
• 第三个链接href为空，不满足:link的要求，所以不生效，和你理解的一致。

修复方案 #

方案1：直接选择所有a标签（最简单）

把.anchor a:link改成.anchor a，这样不管链接是否被访问，都会应用红色样式：

/* Anchor tags */
.anchor {
  font-size: 18px;
}

.anchor a {
  color: red;
  text-decoration: none;
}

方案2：同时覆盖:link和:visited伪类

如果你只想针对有有效href的链接（排除空href的），可以同时给:link和:visited设置样式，覆盖浏览器默认的已访问样式：

/* Anchor tags */
.anchor {
  font-size: 18px;
}

.anchor a:link,
.anchor a:visited {
  color: red;
  text-decoration: none;
}

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