这个CSS类能以更短，更好的方式编写吗？

你可以用更短的方式编写这个CSS类吗？谢谢。这个CSS类能以更短，更好的方式编写吗？

.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, .MessageSender a:hover 
{ 
    text-decoration: underline; 
}

来源

2011-09-25 MonsterMMORPG

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

你或许应该还包括:focus。我也会使用:link。

在实践中，正确DRY简洁，简洁和UX一致性，我会在全球范围宣布所有这些风格在裸a选择，所以更喜欢这样的：

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

来源

2011-09-26 09:38:10 graphicdivine

真的很简单的方法是看少CSS。 www.lesscss.org

来源

2011-09-25 23:00:38 Eddie

您可以将单个类应用于锚点，以便您不定义两次相同的组。

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

来源

2011-09-25 23:01:43 Seth

感谢，但不是我的意思：） – MonsterMMORPG

不，没有办法缩短这个时间。我发现对堆栈溢出另一个问题：CSS more short query

来源

2011-09-25 23:05:24 NE555

这个CSS类能以更短，更好的方式编写吗？

回答

相关问题