同一HTML页面上不同颜色的链接

Question

同一HTML页面上不同颜色的链接

htmlcsscolorshyperlink

11

您好，我想在同一页上使用不同颜色的链接。我希望某些链接是蓝色的，而另一些链接是黑色的。我对HTML和CSS很陌生，谢谢您提前帮助！

-Spencer

- Spencer

5个回答

5

只需给您的超链接<a>设置一个类名，并根据您的要求编写CSS即可。

例如：

CSS

<style>
.red { 
 color : #f00; text-decoration : none;
}

.green { 
 color : #0f0; text-decoration : none;
}

.blue { 
 color : #00f; text-decoration : none;
}

</style>

标记语言：

<a href="#" class="red" > Link0 </a>
<a href="#" class="green" > Link1 </a>
<a href="#" class="blue" > Link2 </a>

一个简单的演示

- user372551

谢谢，这很有帮助。然而，新的类别没有我需要的一些效果，比如当鼠标悬停时被下划线。我该如何扩展这些CSS属性呢？ - Spencer

2

您可以给链接添加不同的类，例如：

<a href="..." class="internal">Link to some internal page</a>
<a href="..." class="external">Link to some external page</a>

并编写如下 CSS 规则：

a.internal {
    color: ...;
}

a.external {
    color: ...;
}

a.internal 表示选择所有带有 internal 类的 a 元素。

了解更多CSS知识。

- Felix Kling

由于只有两种不同的颜色 - 蓝色和黑色 - 所以没有必要使用两个类。一种颜色可以是默认值（蓝色本来就是），而另一种颜色可以是一个类。 - Šime Vidas

1

<a href="http://" style="color: red">RED</a>

<a href="http://" style="color: blue">RED</a>

如上所述，如果您希望设置每个单独链接，只需在 a href 中输入 style="color: ###" 即可将其设置为任何您想要的颜色。:)

对于更一般的情况，请使用

<a href="http://" class="red">RED</a>

<a href="http://" class="blue">RED</a>

并在您的CSS文件中声明

.red {
color: red;
}

.blue {
color: blue;
}

- Mantar

1

你需要一些方法来指定哪些链接应该具有哪种样式，有几种选择。以下是一些示例：

所有在具有id="Main"的元素内的链接都是黑色的：

#Main a { color: #000; }

所有在带有 class="Message" 的元素中的链接都是蓝色的：

.Message a { color: #00f; }

所有链接本身具有 class="command" 的都是黑色的：

a.command { color: #000; }

所有在 li 元素内的链接都是深蓝色的：

li a { color: #009; }

您还可以直接为特定链接指定样式。

<a href="page.html" style="color:#000;">

- Guffa

为什么只有 a.Message 起作用而 .Message a 不起作用？这是浏览器相关的吗？ - Brian Wiley

@BrianWiley：它们匹配不同的元素。a.Message 匹配 class="Message" 的链接，而 .Message a 则匹配 class="Message" 元素内的链接。 - Guffa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eriksv88 · Accepted Answer

CSS:

a.class1 {color:red;}
a.class1:link  {text-decoration: none; color: red;}
a.class1:visited {text-decoration: none; color: red;}
a.class1:hover {text-decoration: underline; color: red;}
a.class1:active {text-decoration: none; color: red;}


a.class2 {color:blue;}
a.class2:link {text-decoration: none; color: blue;}
a.class2:visited {text-decoration: none; color: blue;}
a.class2:hover {text-decoration: underline; color: blue;}
a.class2:active {text-decoration: none; color: blue;}

HTML:

<a href="http://www.google.com" class="class1">Google</a>
<a href="http://stackoverflow.com" class="class2">Stackoverflow</a>

演示： https://jsfiddle.net/3L4xguj7/

更新于2021年5月16日: 更新了链接。