Question

当我使用时，我似乎无法将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内联在页面中时，它确实有效。有什么想法吗？

皮特

Answer 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 */ }

了解更多信息 - A really good article of the various CSS selection methods is here on NetTuts。

Answer 2

两地都需要#：

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

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

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

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

Answer 3

简单地使用#header - 因为它是一个id，它应该已经是唯一的（编辑：只要没有其他页面你不希望这种情况发生并且不会发生{ {1}}）。

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

3 个答案: