（后续）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

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

e.g。

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

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

...等

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

e.g。 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;
}

提示：如果您使用描述性（＆＃34;语义＆＃34;）类名称.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;
}

我希望这有帮助！

编辑：为简单而清理。