给同一个页面设置不同样式的超级链接

同一页面不同样式超链接（a 标签）三种实现方式
一、类选择器（最常用，推荐）
给不同链接加 class，CSS 分别写样式

HTML

<!-- 普通链接 -->

<a href="#" class="link-normal">普通文字链接</a>

<!-- 按钮样式链接 -->

<a href="#" class="link-btn">按钮链接</a>

<!-- 导航链接 -->

<a href="#" class="link-nav">导航菜单</a>

CSS

/* 普通链接 */

.link-normal {

  color: #0066cc;

  text-decoration: underline;

}

.link-normal:hover {

color: red;

}

/* 按钮链接 */

.link-btn {

  display: inline-block;

  padding: 6px 12px;

  background: #2288ff;

  color: #fff;

  text-decoration: none;

  border-radius: 4px;

}

.link-btn:hover {

  background: #0066dd;

}

/* 导航链接 */

.link-nav {

  color: #333;

  text-decoration: none;

  margin: 0 10px;

}

  .link-nav:hover {

  border-bottom: 2px solid orange;

}

二、后代选择器（按父容器区分，不用加 class）
相同 a 标签，放在不同盒子里自动不同样式
HTML

 CSS

 

三、伪类区分链接四种状态（所有链接通用）
a:link 未访问、a:visited 已访问、a:hover 悬浮、a:active 点击瞬间

 

四、属性选择器（根据 href 区分）
按链接地址匹配样式