Question

您好我正在尝试在同一页面上使用不同的颜色链接。我想要一些链接为蓝色，一些链接为黑色。我是html和CSS的新手，所以提前谢谢你！

-Spencer

Answer 1

<强> 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>

<强>演示： http://cssdesk.com/qukaq

Answer 2

只需将类名设置为超级链接<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>

A simple Demo

Answer 3

您可以为链接指定不同的类，例如：

<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表示选择所有a - 类internal 的元素。

Learn more about CSS.

Answer 4

<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;
}

Answer 5

您需要某种方式来指定哪些链接应该具有哪种样式，并且有多种方式可供选择。一些例子：

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;">

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

5 个答案:

A simple Demo