同一 HTML 页面上的不同颜色链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4531208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Different Color Links on the Same HTML Page
提问by Spencer
Hi I am trying to have different color links on the same page. I want some links to be blue and some links to be black. I am new to html and CSS so thank you in advance!
嗨，我正在尝试在同一页面上使用不同颜色的链接。我希望一些链接是蓝色的，而一些链接是黑色的。我是 html 和 CSS 的新手，所以提前谢谢你！
-Spencer
-斯宾塞
回答by eriksv88
CSS:
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:
HTML:
<a href="http://www.google.com" class="class1">Google</a>
<a href="http://stackoverflow.com" class="class2">Stackoverflow</a>
Demo: http://cssdesk.com/qukaq
回答by Spencer
just set a class name to ur hyper links <a>and write the CSS according to ur requirement
只需为您的超链接设置一个类名<a>并根据您的要求编写 CSS
for Example
例如
CSS
CSS
<style>
.red {
color : #f00; text-decoration : none;
}
.green {
color : #0f0; text-decoration : none;
}
.blue {
color : #00f; text-decoration : none;
}
</style>
Markup:
标记：
<a href="#" class="red" > Link0 </a>
<a href="#" class="green" > Link1 </a>
<a href="#" class="blue" > Link2 </a>
A simple Demo
一个简单的演示
回答by Felix Kling
You can give the links different classes like:
您可以为链接提供不同的类，例如：
<a href="..." class="internal">Link to some internal page</a>
<a href="..." class="external">Link to some external page</a>
And write CSS rules like:
并编写如下 CSS 规则：
a.internal {
color: ...;
}
a.external {
color: ...;
}
a.internalmeans select all a-elements with class internal.
a.internal表示选择所有a具有 class 的元素internal。
回答by Guffa
You need some way to specify which links should have which style, and there are seveal to choose from. Some examples:
您需要某种方式来指定哪些链接应该具有哪种样式，并且有多种可供选择。一些例子：
All links that is within the element with id="Main"are black:
元素内的所有链接id="Main"都是黑色的：
#Main a { color: #000; }
All links that is within any element with class="Message"are blue:
任何元素内的所有链接class="Message"都是蓝色的：
.Message a { color: #00f; }
All links that themselves have class="command"are black:
所有链接本身class="command"都是黑色的：
a.command { color: #000; }
All links that are within a lielement are dark blue:
li元素内的所有链接都是深蓝色：
li a { color: #009; }
You can also specify style directly for a specific link.
您还可以直接为特定链接指定样式。
<a href="page.html" style="color:#000;">
回答by Mantar
<a href="http://" style="color: red">RED</a>
<a href="http://" style="color: blue">RED</a>
As seen above, you simply input style="color: ###" in the a href to set it to whatever you want if you wish to set each individual link. :)
如上所示，如果您希望设置每个单独的链接，您只需在 a href 中输入 style="color: ###" 即可将其设置为您想要的任何内容。:)
For more general, use
对于更一般的，使用
<a href="http://" class="red">RED</a>
<a href="http://" class="blue">RED</a>
and in your CSS file state
并在您的 CSS 文件状态
.red {
color: red;
}
.blue {
color: blue;
}
