为何设置a:link color:red;后导航链接颜色未改变？

原因分析 #

1. a:link 仅作用于未被访问过的有效链接，你的链接 href="" 是空值，部分浏览器会判定这不是有效链接，因此不会触发 a:link 样式。
2. 可能存在优先级更高的样式（比如浏览器默认样式或其他自定义类）覆盖了你的设置。

解决方案 #

方案1：使用通用a选择器替代a:link #

直接针对所有<a>标签设置颜色，不受访问状态影响：

.navigation{
  list-style-type: none;
  float: left;
  
  li{
    display: inline-block;
    margin-left: 30px;
    
    &:first-child{
      margin: 0;
    }
    a{ // 替换a:link为a
      color: red;
    }
  }
  
}

方案2：给链接添加有效href值 #

如果坚持要用a:link，给href设置有效占位符（比如#），让浏览器识别为有效链接：

<li><a href="#" class="huy">About us</a></li>
<li><a href="#" class="huy">Pricing</a></li>
<li><a href="#" class="huy">Contact</a></li>

方案3：提高样式优先级 #

如果是被其他样式覆盖，通过类名+伪类组合提升优先级：

.navigation{
  list-style-type: none;
  float: left;
  
  li{
    display: inline-block;
    margin-left: 30px;
    
    &:first-child{
      margin: 0;
    }
    a.huy:link{ // 添加类名huy，提高样式优先级
      color: red;
    }
  }
  
}

额外提示 #

如果需要区分不同交互状态的链接样式，可以完整设置伪类序列：

a.huy:link { color: red; } /* 未访问链接 */
a.huy:visited { color: darkred; } /* 已访问链接 */
a.huy:hover { color: orange; } /* 鼠标悬停 */
a.huy:active { color: yellow; } /* 点击激活状态 */

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