a:link a:visited a:hover a:active 的 CSS 样式相同,真的要写 4 遍
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5567948/
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 same style for a:link a:visited a:hover a:active, really have to write it all out 4 times
提问by RIK
Ho ho,
呵呵,
When working with CSS. If the CSS style is the same for a:link a:visited a:hover a:active does one really have to write it out for times. Working with a custom link.
使用 CSS 时。如果 a:link a:visited a:hover a:active 的 CSS 样式是相同的,真的需要多次写出来。使用自定义链接。
.DT_compare a:link {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}
Any shortcuts?
有什么捷径吗?
Marvellous
奇妙
回答by BoltClock
Just forget the pseudo-classes, and select only a
:
忘记伪类,只选择a
:
.DT_compare a {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}
This isn't a very specific selector though; if necessary you can find some other way to increase it so it overrules your a:hover
and a:active
selectors, or go with whoughton's answerinstead and just specify all four of them.
不过,这不是一个非常具体的选择器;如有必要,您可以找到其他一些方法来增加它,使其否决您的a:hover
和a:active
选择器,或者改为使用whoughton 的答案,只需指定所有四个。
Then again, if your main hyperlink styles apply to a:hover
and a:active
without anything before them, as long as you place your .DT_compare a
rule beneath them it should work fine.
话又说回来,如果你的主超级链接样式应用到a:hover
并a:active
没有他们之前任何事情,只要你把你.DT_compare a
在他们之下的规则就应该工作的罚款。
回答by whoughton
I don't think you can do any shorter than:
我认为你不能做任何比以下更短的事情:
.DT_compare a:link,
.DT_compare a:visited,
.DT_compare a:hover,
.DT_compare a:active, {
font-family:"Lucida Grande", Arial, sans-serif;font-size:11px;line-height:14px;font-weight:normal;font-style:normal;color:#EEE;text-align:center; }
回答by shanethehat
just leave the :link
off to affect all the states at once.
只需:link
关闭即可立即影响所有状态。
回答by Richard
Lesscan help here via 'mixins', e.g.:
Less可以通过“mixins”在这里提供帮助,例如:
.a {
text-decoration: none;
color: black;
}
a:link { .a; }
a:visited { .a; }
I wouldn't be surprised if there were a nicer way but that's the best I know. lessis seriously great - it's basically CSS, but how a programmer would have designed it. You'll never have to repeat yourself again...
如果有更好的方法,我不会感到惊讶,但这是我所知道的最好的方法。less真的很棒 - 它基本上是 CSS,但程序员会如何设计它。你永远不必再重复自己...
回答by systemaddict
.DT_compare a[href]{ ... }
is nice because you can sneak in some extra specificity there. (attribute selector == class selector, though).
很好,因为你可以在那里潜入一些额外的特殊性。(不过,属性选择器 == 类选择器)。
回答by Chris P
.DT_compare a:link, a:visited {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}
.DT_compare a:hover, a:active {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}