CSS a vs a:link，有何区别

在本文中，我们将介绍CSS中的两个属性：a和a:link，并讨论它们之间的区别。CSS是一种用于定义和布局网页样式的语言，而链接是网页中常用的元素之一。

阅读更多：CSS 教程

a属性

a属性用于定义网页链接的样式，包括文本颜色、文本修饰、鼠标悬停效果等。例如，我们可以使用a属性将链接的默认颜色设置为蓝色，并在用户将鼠标悬停在链接上时更改颜色为红色。

下面是一个示例，演示了如何使用a属性定义链接的样式：

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: red;
}

在上面的示例中，我们将链接的默认颜色设置为蓝色，并将文本修饰设置为无修饰（通过text-decoration：none）。当用户将鼠标悬停在链接上时（通过a:hover），链接的颜色将更改为红色。通过使用a属性，我们可以自定义链接的样式，以使其与网页的整体设计相符。

a:link属性

a:link属性用于定义未被访问的链接的样式。:link伪类选择器用于选择未被访问的链接，并根据需要设置样式。与a属性不同，a:link仅适用于未被访问的链接，而不包括已经被访问和交互后的链接。

下面是一个示例，演示了如何使用a:link属性定义未被访问的链接的样式：

a:link {
    color: green;
    text-decoration: underline;
}

在上面的示例中，我们将未被访问的链接的颜色设置为绿色，并为其添加下划线（通过text-decoration: underline）。通过使用a:link属性，我们可以在链接列表中突出显示未被访问的链接，以吸引用户的注意。

需要注意的是，在CSS中定义链接样式时，a:link应放在a:hover之前。这是因为样式表将顺序应用于选择器，后面的样式会覆盖前面的样式。如果将a:hover放在a:link之前，链接在未访问时也会出现悬停效果，这不符合预期。

示例

为了更好地理解a和a:link的区别，让我们看一个实际示例。考虑以下HTML代码段：

<a href="https://www.example.com" class="custom-link">Example Link</a>

使用以下CSS代码：

a {
    color: blue;
}

a:link {
    color: green;
    text-decoration: underline;
}

a.custom-link {
    color: red;
}

a.custom-link:hover {
    color: orange;
}

在上面的示例中，我们定义了三个不同的选择器来设置链接样式。首先，我们将所有链接的颜色设置为蓝色（通过a选择器）。然后，我们使用a:link选择器将未被访问的链接的颜色设置为绿色，并添加下划线。最后，我们使用自定义类.custom-link将链接的颜色设置为红色，并在用户将鼠标悬停在链接上时将颜色更改为橙色。

通过此示例，我们可以清楚地看到不同选择器对链接样式的影响。在这种情况下，未被访问的链接将应用a:link属性的样式（绿色和下划线），而具有自定义类的链接将应用a.custom-link属性的样式（红色）。当用户将鼠标悬停在自定义链接上时，颜色将从红色更改为橙色。