CSS same style for a:link a:visited a:hover a:active, really have to write it all out 4 times
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;
}
精彩评论