使用 id 和类的 CSS 样式链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13735635/
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
CSS styling links using id's and classes
提问by Rking
Is there a way of styling links using a id or a class without having to create a new selector for each individual element? for example something like this or close to this would be preferable
有没有一种方法可以使用 id 或类来设置链接样式，而不必为每个单独的元素创建一个新的选择器？例如像这样或接近这样的东西会更可取
#logo {
a: link {color: black}
a: visited{color: black}
a: hover{color: black}
}
However, the above syntax does not work instead all i can find is
但是，上面的语法不起作用，我能找到的是
#logo a:hover {
color: black;
}
#logo a:visited {
color: white
}
#logo a:visited {
颜色：白色
}
I feel like there's an easier way than this.
我觉得有比这更简单的方法。
回答by Bobb Dizzles
Heres how to do it to all links I believe it should work:
以下是如何对我认为它应该工作的所有链接进行操作：
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
回答by pkm1986
Not all browser support the above methodology of separating the tag styles with class or ID when you are dealing with different style in CSS with tag in single page.
当您在单个页面中处理带有标签的 CSS 中的不同样式时，并非所有浏览器都支持上述将标签样式与类或 ID 分开的方法。
One can follow below method:
可以按照以下方法：
**If using ID with Field**
a:link#myID {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited#myID {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover#myID {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active#myID {
color: yellow;
background-color: transparent;
text-decoration: underline;
} <a href="#" target="_blank" ID="myID">Click Here</a>
**If using Class with Field**
a:link.myClass {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited.myClass {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover.myClass {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active.lx {
color: yellow;
background-color: transparent;
text-decoration: underline;
}<a href="#" target="_blank" class="myClass">Click Here</a>
回答by Tim
Not directly in css, but there are some projects that extend css
不是直接在css中，但是有一些项目扩展了css
Check out sass:
看看sass：
回答by BuddhiP
回答by Dave Anderson
With pure CSS you must specify each pseudo-selector but you can group them to apply the same style attributes;
使用纯 CSS，您必须指定每个伪选择器，但您可以将它们分组以应用相同的样式属性；
#logo a:link,
#logo a:visited,
#logo a:hover {
color: black;
}
Beware that The order of link pseudo-classes matters.
请注意链接伪类的顺序很重要。
