CSS 同样的样式应用于a:link a:visited a:hover a:active，真的需要写四遍吗

在本文中，我们将介绍在CSS中如何使用同样的样式来应用于4个伪类选择器：a:link、a:visited、a:hover、a:active。你可能会想，既然这4个伪类选择器都是用来控制链接在不同状态下的样式，那么有没有一种简便的方法，可以同时应用同样的样式呢？答案是肯定的，我们可以通过巧妙的CSS写法来实现这一需求，并且避免重复书写样式代码。

首先，让我们了解一下这4个伪类选择器的含义及其使用场景：

• a:link：用于指定链接的默认样式，即链接未被访问时的样式。
• a:visited：用于指定已经访问过的链接的样式。
• a:hover：用于指定鼠标悬停在链接上时的样式。
• a:active：用于指定链接被点击时的样式。

通常情况下，我们会分别为这4种状态的链接设置不同的样式，而且我们可能会将它们分别写在CSS文件中的不同位置，这样会导致代码的冗余，并且修改样式时需要多处修改。

那么有没有办法可以避免这种重复性的工作呢？答案是可以的。我们可以使用逗号分隔多个选择器，将相同的样式应用于多个选择器，其中就包括这4个伪类选择器。

示例代码如下：

a:link, a:visited, a:hover, a:active {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #ff0000;
}

在上面的代码中，我们将color属性和text-decoration属性的样式应用于a:link、a:visited、a:hover、a:active这4个选择器。这样一来，我们就避免了重复书写样式代码的问题。

另外，我们也可以针对每个伪类选择器单独定义样式，覆盖掉通用样式，以实现不同状态下的特殊效果。例如，我们可以通过为a:hover选择器添加额外的样式，来改变鼠标悬停时链接的颜色，如上面代码中的color: #ff0000;。

这种技巧不仅适用于链接选择器，还可以用于其他伪类选择器或者普通选择器的组合。只需要使用逗号分隔不同的选择器，就可以将相同的样式应用于它们。

阅读更多：CSS 教程

总结

通过合理运用CSS的选择器，我们可以避免重复书写样式代码，提高开发效率。在本文中，我们介绍了如何使用逗号分隔多个选择器，将同样的样式应用于a:link、a:visited、a:hover、a:active这4个链接选择器，并且提供了一个示例代码来说明这种写法的使用方法。希望本文能对你在CSS样式设计中的工作有所帮助。