这个 CSS 类可以用更短、更好的方式编写吗？答案

【问题标题】：Can this CSS class written in shorter, better way?这个 CSS 类可以用更短、更好的方式编写吗？
【发布时间】：2011-09-26 17:38:10
【问题描述】：

你能用更短的方式编写这个 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;
}

【问题讨论】：

标签： class css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

真正简短的方法是查看 Less CSS。 www.lesscss.org

【讨论】：