Question

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

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

Answer 2

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

Answer 3

没有。没有办法缩短它。我在Stack Overflow上发现了另一个问题：CSS more short query

Answer 4

.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简洁，简洁和用户体验一致性，我会在裸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;    
}

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

4 个答案: