链接样式

链接状态

:link 未被访问过
:visited 已被访问过
:hover 鼠标悬浮状态
:focus 获得焦点状态（通过 Tab 键或 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus）
:active 激活状态，如被点击

注意如果要给所有这些状态都添加样式，请遵循 LVHFA 顺序法则。

导航栏

<nav>
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">HTTP</a></li>
  </ul>
</nav>

body { 
  margin: 0; 
  font-family: 'Source Code Pro', monospace;
}
 
nav { 
  width: 680px;
  margin: auto;
}
 
ul {
  padding: 0;
  overflow: hidden;
  list-style: none; 
}
 
ul > li { 
  float: left;
}
 
ul > li > a {
  color: white;
  width: 170px;
  height: 50px;
  display: block;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease;
}
 
ul > li > a:hover {
  font-size: 24px;
}
 
ul > li:nth-child(1) > a {
  background: deepskyblue;
}
 
ul > li:nth-child(2) > a {
  background: limegreen;
}
 
ul > li:nth-child(3) > a {
  background: darkorange;
}
 
ul > li:nth-child(4) > a {
  background: blueviolet;
}

🚀 http://js.jirengu.com/ropem/edit?html,css,output

参考链接

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_link s

目录

链接样式

链接状态

导航栏

参考链接