mdn-样式化链接

链接状态

• link:没有访问过的，默认状态（：link）
• visited:访问过（：visited)
• hover:鼠标光标停留（：hover)
• focus:链接被选中（：focus)
• active:链接被激活（点击）（：active)

这个顺序是重要的，因为链接的样式是建立在另一个样式之上的，比如第一个规则的样式会应用到所有后续的样式，如果当一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。

常用属性

• color:文字颜色
• cursor:鼠标光标颜色
• outline:文字轮廓

在链接中包含图标

• 图标站点；

• 例子

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

样式化链接为按钮

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}