为什么当我有 #id #id 时 CSS 不起作用？答案

【问题标题】：Why won't CSS work when I have #id #id?为什么当我有 #id #id 时 CSS 不起作用？
【发布时间】：2010-11-07 00:35:00
【问题描述】：

当我使用时，我似乎无法让我的 CSS 链接到 div：

[in stylesheet(style.css)]

#sitecontainer .header {
    background-image:url('/images/header-background');
}


<div id="sitecontainer">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
</div>

但是，当我将 CSS 内嵌在页面中时，它确实有效。有什么想法吗？

皮特

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

您的 CSS 正在标题上使用类选择器：

.header

而不是。

#header

如果您有这样的 HTML 标记，这将起作用：

<div id="sitecontainer">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>
</div>

但在您的情况下，您可以使用：

#sitecontainer #header

甚至更好（除非你在你的网站中使用这个特定的标题做一些非常具体的事情）你应该把它削减到

#header { /* CSS rules here */ }

【讨论】：

在我看来页眉、内容和页脚是非常通用的布局元素。它们可能会再次更深地嵌套在您的页面中。示例：您的网站有页眉、内容和页脚，在您的内容中，您可能想显示一些文本文档，它本身也有页眉、内容和页脚，所以在语义上我认为类是更好的方法。
我倾向于同意。在 HTML5 中，页眉、页脚和文章都是可重复的元素，因此要具有相似的语义，最好使用类。
我还是喜欢给我的主页眉和页脚赋予页眉和页脚的 id，子页眉和页脚可以有一个类。

【解决方案2】：

您在两个地方都需要#：

#sitecontainer #header {
  background-image:url('/images/header-background');
}

但请确保您的 ID 在页面中是唯一的，否则会导致其他问题。如果您有多个标题，则 do 使用 class 属性代替：

<div id="sitecontainer">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

...并将您当前的 CSS 与 .header 类选择器一起使用。

【讨论】：

@Harmen - 可能是这样，但假设不是显而易见的问题只会引起无尽的头痛，解决显而易见的问题，然后看看它是否仍然坏:)问题中的代码不起作用...*永远*假设它“只是一个错字”，许多、许多、许多编程问题都是错字。

【解决方案3】：

只需使用#header - 因为它是一个 ID，它应该已经是唯一的（编辑：只要没有其他页面您不希望这种情况发生并且没有 sitecontainer )。

【讨论】：

虽然它在页面中应该是唯一的，但它在所有页面中可能不是唯一的。例如，如果 OP 在另一个不应设置样式的页面上有 <div id="othercontainer"><div id="header"></div></div> 怎么办？
@Nick Craver：嗯，没错。我假设他在所有页面上都将容器命名为 sitecontainer。