Почему не работает CSS, когда у меня #id #id?

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

Для получения дополнительной информации - На NetTuts .

имеется действительно хорошая статья о различных методах выбора CSS.

Answer 2

Просто используйте #header - так как это идентификатор, он уже должен быть уникальным (редактировать: если нет других страниц, на которых вы не хотите, чтобы это происходило и не было sitecontainer).

Answer 3

Вам нужно # в обоих местах:

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

Убедитесь, что ваши идентификаторы уникальны на странице, иначе это вызовет другие проблемы. Если у вас несколько заголовков, do вместо этого использует атрибут class:

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

... и используйте ваш текущий CSS с селектором класса .header.