CSS same style for a:link a:visited a:hover a:acti

问题:

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

回答1:

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.

回答2:

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

回答3:

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

回答4:

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...

回答5:

.DT_compare a[href]{ ... }

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

回答6:

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