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

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

首先，他定义了链接，访问，悬停和活动的样式，这些样式大多彼此相同。

然后，在两个特定情况下，他超越了那个。

代码可以通过这种方式缩短，并且还反映了这四个代码大致相同的事实，正好在代码中（自我记录）。

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

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

后者重复规则，前者不那么简洁，而且自我记录较少;他的版本说＆＃34;完全相同，除了......＆＃34;。

Answer 2

这只是因为他需要写下面的一个你做同样的事情：

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

他认为他的方式更短，更漂亮和/或更具可读性。

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

Answer 4

你是对的，它是重复的。这只是因为CSS的作者选择以这种方式整理样式。颜色和线高是共享的，所以它或者是更多的分离规则来覆盖每种情况。无论你采用哪种方式，都会出现重复 - 规则或选择器。重要的是最终胜出哪条规则。

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

4 个答案: