(后续) CSS Style 特定链接

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

Answer 2

简单的样式

要实现您要查找的内容，您可以将一个类应用于将容纳您的侧边栏链接的容器（我们将在此示例中使用 .sidebar），然后定位属于该容器内的任何锚点.sidebar 类应用于。

标记：

<div class="sidebar">
    <a href="/">Lorem Ipsum</a>
    <a href="/about">Lorem Ipsum</a>
    <a href="/contact">Lorem Ipsum</a>
</div>

CSS：

/* font family, text-decoration, and font-size for all of the links you want to style */
.sidebar a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-size: 1em;
}

/* color for the unvisited links you want to style */
.sidebar a:link {
    color: #FF0000;
} 

/* color for the visited links you want to style */
.sidebar a:visited {
    color: #00FF00;
}

/* underline the links you want to style when hovered */
.sidebar a:hover {
    text-decoration: underline;
}

/* color for the active links you want to style */
.sidebar a:active {
    color: #0000FF;
}

提示：如果您使用描述性（“语义”）类名，如 .sidebar，您（和其他开发人员）可以更轻松地识别正在设置样式的元素。

进一步定制：

如果您想对一个（或多个）侧边栏链接进行一些额外的自定义以使其从其他链接中脱颖而出，该怎么办？好吧，让我们假设您希望其中一个链接是绿色的。

您可以通过将一个类应用于我们容器中的一个锚点来实现这一点。

标记：

<div class="sidebar">
    <a href="index.html" class="green">Lorem Ipsum in GREEN!</a>
    <a href="/about">Lorem Ipsum</a>
    <a href="/contact">Lorem Ipsum</a>
</div>

CSS：

/* font family, text-decoration, and font-size for all of the links you want to style */
.sidebar a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-size: 1em;
}

/* color for the unvisited links you want to style */
.sidebar a:link {
    color: #FF0000;
} 

/* color for the visited links you want to style */
.sidebar a:visited {
    color: #00FF00;
}

/* underline the links you want to style when hovered */
.sidebar a:hover {
    text-decoration: underline;
}

/* color for the active links you want to style */
.sidebar a:active {
    color: #0000FF;
}

/* override the color of one of our sidebar links to be green! */
.sidebar a.green {
    color: green;
}

我希望这会有所帮助！

编辑：为简单起见进行了清理。