当我有#id #id时，为什么CSS不能工作？

I can't seem to get my CSS to link to a div when I use:

我使用时似乎无法将我的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>

However when I place the CSS inline in the page it does work. Any ideas?

但是，当我将CSS内联到页面中时，它确实有效。有任何想法吗？

Pete

皮特

3 个解决方案

#1

Your CSS is using a class selector on header:

你的CSS在标题上使用了一个类选择器：

.header

rather than.

而不是。

#header

This would work if you had HTML mark-up like this:

如果你有像这样的HTML标记，这将有效：

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

But in your case you could use:

但在你的情况下你可以使用：

#sitecontainer #header

or even better (unless you're doing something very specific in your site with this particular header) you should just cut it down to

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

#header { /* CSS rules here */ }

For more info - A really good article of the various CSS selection methods is here on NetTuts.

有关更多信息 - NetTuts上提供了各种CSS选择方法的精彩文章。

#2

You need a # in both places:

你需要两个地方的＃：

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

Make sure your IDs are unique in the page though, or this will cause other issues. If you have multiple headers then do use a class attribute instead:

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

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

...and use your current CSS with the .header class selector.

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

#3

Simply use #header - as it is an id, it should already be unique (edit: as long as there aren't other pages where you don't want this to happen and don't hava a sitecontainer).

只需使用#header - 因为它是一个id，它应该已经是唯一的（编辑：只要没有其他页面，你不希望这种情况发生，并且不要使用网站容器）。

#1