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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:08:36  来源:igfitidea点击:

CSS same style for a:link a:visited a:hover a:active, really have to write it all out 4 times

csscss-selectors

提问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:hoverand a:activeselectors, or go with whoughton's answerinstead and just specify all four of them.

不过,这不是一个非常具体的选择器;如有必要,您可以找到其他一些方法来增加它,使其否决您的a:hovera:active选择器,或者改为使用whoughton 的答案,只需指定所有四个。

Then again, if your main hyperlink styles apply to a:hoverand a:activewithout anything before them, as long as you place your .DT_compare arule beneath them it should work fine.

话又说回来,如果你的主超级链接样式应用到a:hovera: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 :linkoff 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;
}