html - (后续)CSS 样式特定链接

Question

这是 a previous question on Stack Overflow 的后续行动(参见引用链接)。考虑以下代码(来自 W3Schools):

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

如果我将它包含在页面中，这将更改其所有链接的属性。如果我只想修改这些属性特定链接怎么办？例如，我页面侧边栏中的链接。

我相信解决方案会比引用的 Stack Overflow 问题中的解决方案更复杂。我试图将它们嵌套在一些 .class 选择器中并制作 <a class="my_class" href="#">Hello World</a> , 但这似乎不起作用。

Answer 1

您可以为侧边栏指定一个类，并仅设置子链接元素的样式。

例如

<div class="sidebar">
    ...links
</div>

.sidebar a:link {
   color: #FF0000;
}
.sidebar a:visited {
  color: #00FF00;
}

...等等

如果您为链接元素指定特定类，则链接示例中的解决方案也适用。请确保您在元素之后添加类而不是伪选择器。

例如a.my_class:visited 而不是 a:visited.my_class