CSS: 双重声明是什么意思？

Question

我正在构建一个 WordPress 自定义主题，发现在默认的 2010 style.css 文件中有以下内容：

#wrapper {
  margin: 0 auto;
  width: 940px;
}
#wrapper {
  background: pink;
  margin-top: 20px;
  padding: 0 20px;
}

现在这是默认代码（除了pink）。当我尝试折叠它时，这似乎很合理，但会产生很大的差异。

我无法弄清楚为什么要这样声明同一个元素？我以前从未见过这种情况...

WR！

- WhiteRau

Answer 1

当你想要在多个元素上应用共享属性时，它非常有用。另一个有用的应用是从多个来源添加样式表。
例如：

#head, #foot {
    height: 100px;
}
#foot { /*Another foot*/
    color: red;
}

第二个例子：来自多个来源的CSS：

/* External stylesheet: common.css */
body {
    background: yellow;
}
/* Inline stylesheet, overrides external stylehseet */
body {
    background: pink;
}

当两个属性具有相同的优先级时，最后声明的属性将被应用。

- Rob W

---

@WhiteRau 这些是一些例子。有可能出现两个 ID 的原因有很多：1. 开发人员添加了 CSS，但没有查看是否已经存在选择器 2. 选择器最初位于不同的文件中，但在合并文件后，选择器出现了两次 3. 最初，其中一个 #wrapped 选择器是 #another,#wrapper 的一部分。开发人员决定删除 #another，并对“#wrapper,?”进行搜索和替换，导致出现了两个 #wrapper 选择器。我又给出了另外三个例子。你现在有更好的理解了吗？ - Rob W

不要以为我没有很有效地传达问题。我放弃这个问题了。我的好奇心已经让我少了2分了...不值得。:P - WhiteRau

我加了一个赞，因为我见过更糟糕的问题。我理解你的问题了吗？（请查看回答和评论）。 - Rob W

我得检查一下我的缓存或其他东西。我只有一个CSS文件，但在这段代码的部分上，它会出现非常奇怪的情况。虽然我很了解CSS(我认为)，但我不明白为什么当我折叠声明时会出现如此不同的行为。边距会扩大，粉色在我输入时没有显示，但在所有元素都在同一位置下时突然出现了。:'( 根据大家所说的，那一定是本地问题。这让人不安，因为还有什么其他的问题没有被发现呢...？ gack - WhiteRau

@WhiteRau 让我们帮你省去烦恼。下载 Firebug，并使用 检查元素 功能。使用它，你将在一分钟内知道声明的来源。 - Rob W

Answer 2

它只是覆盖之前声明的属性。

wrapper现在将具有margin:20px auto 0 auto（上 右 下 左）。

- Damon Bauer

---

不是。它做了其他的事情。由于是 WP 平台，他们的代码通常非常紧凑，因此双重声明没有意义。而且，正如我所说，当你试图将两者合并在一起时，会发生完全不同的事情。如果第二个只是覆盖第一个，那么不应该发生任何事情。但出于我不理解的原因，确实发生了某些事情。 - WhiteRau

http://jsfiddle.net/nAGxa/ - 这就是我所说的。如果完全发生了其他事情，那么CSS中必须有其他地方让它发生。 - Damon Bauer

我会调查一下。我们会把这个问题视为已解决。不能承受不断下降的积分来寻找答案。谢谢。 - WhiteRau