2

在审查某人的 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;
}
4

4 回答 4

3

它让他通过差异编码。

首先他定义了link、visited、hover 和active 的样式，它们大部分是相同的。

然后在下面，他在两个特定情况下超越了这一点。

通过这种方式，代码可以更短，并且也反映了这四个几乎相同的事实，就在代码中（自我文档）。

如果您强制执行不重复规则，它可能看起来像：

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

后者重复规则，前者不那么简洁，不那么自我记录；他的版本说“彼此完全一样，除了……”。

于 2012-08-27T16:04:57.177 回答
3

那只是因为他需要编写以下内容之一，您也这样做：

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

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

或者

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

他认为他的方式更短、更漂亮和/或更易读。

于 2012-08-27T16:07:15.337 回答
3

不要将其视为重复，只需将其视为替代。他只是在某些情况下覆盖了样式。他写它的方式标记略少，见下文，当不“复制”时它实际上更长

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

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;
}
于 2012-08-27T16:08:30.567 回答
2

你是对的，它是重复的。只是因为那个 CSS 的作者选择了这种方式来整理样式。颜色和行高是共享的，所以要么就是这样，要么制定更多单独的规则来涵盖每种情况。无论您采用哪种方式，都会有重复 - 无论是规则还是选择器。重要的是哪条规则最终胜出。

于 2012-08-27T16:04:32.147 回答