开发者

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

开发者 https://www.devze.com 2023-02-22 17:34 出处:网络
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.

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.

.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


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


Just forget the pseudo-classes, and select only 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 answer instead and just specify all four of them.

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.


just leave the :link off to affect all the states at once.


Less can help here via 'mixins', e.g.:

.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. less is seriously great - it's basically CSS, but how a programmer would have designed it. You'll never have to repeat yourself again...


.DT_compare a[href]{ ... }

is nice because you can sneak in some extra specificity there. (attribute selector == class selector, though).


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

精彩评论

暂无评论...
验证码 换一张
取 消