Can this CSS class written in shorter, better way?
Can you write this CSS class in a shorter way? Thank you.
.MessageTitle a, .MessageTitle a:visited, .MessageTitle a:active, .MessageTitle a:hover,.MessageSender a, .MessageSender a:visited, .MessageSender a:active, .MessageSender a:hover
{
text-decoration: none;
outline: none;
display:block;
vertical-align: middle;
text-align: center;
color: Black;
line-height:30px;
}
.MessageTitle a:active, .MessageTitle a:hover,.MessageSender a:active, .Messag开发者_如何学JAVAeSender a:hover
{
text-decoration: underline;
}
You could apply a single class to the anchor so you aren't defining the same groups twice.
.messageLink, .messageLink:visited {
color: #000;
display:block;
line-height:30px;
outline: none;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.messageLink:active, .messageLink:hover { text-decoration:underline; }
.MessageTitle a,
.MessageSender a
{ text-decoration: none;
outline: none;
display:block;
vertical-align: middle;
text-align: center;
color: Black;
line-height:30px;
}
.MessageTitle a:active,
.MessageTitle a:hover,
.MessageSender a:active,
.MessageSender a:hover
{
text-decoration: underline;
}
.MessageSender a:visited,
.MessageSender a:visited
{
text-decoration: none;
}
You should probably also include :focus
. I would also use :link
.
In practice, for proper DRY brevity, simplicity and UX consistency, I would declare all these styles globally on the bare a
selector, so more like this:
a:link
{ text-decoration: none;
outline: none;
color: Black }
a:active,
a:hover,
a:focus
{ text-decoration: underline}
a:visited
{ text-decoration: none}
.MessageTitle a,
.MessageSender a
{
display:block;
vertical-align: middle;
text-align: center;
line-height:30px;
}
The really short way would be to look at Less CSS. www.lesscss.org
精彩评论