CSS 属性设置——我错过了什么吗？

Question

在审查某人的 CSS 文件时，我发现了这一点。他是一位优秀的 CSS 设计师，所以在说任何话之前我想看看是否有什么我没有理解的地方？

在下面的代码片段中，他似乎错误地重新定义了一些属性——即 href 上悬停和事件状态的文本装饰和颜色属性:

.myClass
{
    display: inline-block;
    padding: 0 15px 10px 15px;
}

a.linkWhatsThis:link, 
a.linkWhatsThis:visited, 
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    font-size:11px;
    color: #42382c;
    text-decoration: underline;
    line-height:16px;
}

a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    color: #990000;
    text-decoration: none;
}

Answer 1

它让他可以根据差异进行编码。

首先，他定义了 link、visited、hover 和 active 的样式，这些样式彼此大部分相同。

然后在下面，他在两个特定情况下覆盖了它。

这样代码可以更短，并且也反射(reflect)了这四个大部分相同的事实，就在代码中(自文档)。

如果您强制执行禁止重复规则，它会看起来像:

a.linkWhatsThis:link, 
a.linkWhatsThis:visited, 
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    font-size:11px;
    line-height:16px;
}

a.linkWhatsThis:link, 
a.linkWhatsThis:visited {
    color: #42382c;
    text-decoration: underline;
}
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    color: #990000;
    text-decoration: none;
}

或者喜欢:

a.linkWhatsThis:link, 
a.linkWhatsThis:visited {
    font-size:11px;
    line-height:16px;
    color: #42382c;
    text-decoration: underline;
}
a.linkWhatsThis:hover, 
a.linkWhatsThis:active {
    font-size:11px;
    line-height:16px;
    color: #990000;
    text-decoration: none;
}

后者重复规则，前者不够简洁， self 记录较少；他的版本说“除了……完全一样”。