在CSS中定义a:link、a:visited、a:hover、a:active正确顺序

在CSS中定义链接（a标签）的伪类可以让我们更方便地控制链接在不同状态下的样式。在 CSS 中，链接具有四个伪类：a:link、a:visited、a:hover和 a:active。针对不同的伪类，我们需要设置不同的样式。那么正确的顺序是什么呢？请看下面的攻略：

1. :link 伪类，用于设置链接的初始样式
2. :visited 伪类，用于设置链接在访问过后的样式
3. :hover 伪类，用于设置鼠标悬停在链接上时的样式
4. :active 伪类，用于设置鼠标按下时的样式

下面分别介绍这四个伪类的使用方法和示例。

1. :link

:link 伪类是用于设置链接的初始样式，即还没有访问过的状态。我们可以设置链接的颜色、背景色、边框等等。示例代码如下：

a:link {
  color: #0072c6;
  text-decoration: none;
  background-color: #eef5fb;
  border: 1px solid #0072c6;
  padding: 5px;
}

上面的代码设置了链接的颜色为蓝色，没有下划线，背景颜色为浅灰色，边框为蓝色，内边距为 5px。

2. :visited

:visited 伪类是用于设置链接在访问过后的样式。我们同样可以设置链接的颜色、背景色、边框等属性。但由于安全原因，浏览器不能让我们直接改变访问过链接的样式，否则会造成安全问题。因此，只有少量的属性可以被修改，如颜色、背景色、边框颜色和轮廓颜色。示例代码如下：

a:visited {
  color: #fc8d62;
  background-color: #fdd0a2;
  border-color: #abdda4;
}

上面的代码将访问过的链接的颜色改为橙色，背景颜色为浅橙色，边框颜色为浅绿色。

3. :hover

:hover 伪类用于设置鼠标悬停在链接上时的样式。我们同样可以设置链接的颜色、背景色、边框等。示例代码如下：

a:hover {
  color: #f03b20;
  background-color: #fdd0a2;
  border-color: #f03b20;
  text-decoration: underline;
}

上面的代码设置了链接被鼠标悬停时的颜色为红色，背景颜色为浅橙色，边框颜色为红色，同时增加了下划线。

4. :active

:active 伪类用于设置鼠标点击链接时的样式。我们同样可以设置链接的颜色、背景色、边框等。示例代码如下：

a:active {
  color: #f03b20;
  border-color: #f03b20;
  background-color: #fee0d2;
}

上面的代码设置了鼠标点击链接时的颜色为红色，背景颜色为浅红色，边框颜色为红色。

总体来说，正确顺序为 :link -> :visited -> :hover -> :active，这也是常见的设置顺序。