Warum werden meine CSS-Eigenschaften überschrieben / ignoriert?

Question

May 04, 2012, 06:20 AM

Warum werden meine CSS-Eigenschaften überschrieben / ignoriert?

Ich habe einige Probleme mit der CSS "Hierarchie" (nicht sicher, ob es angebracht ist, sie als Hierarchie zu bezeichnen). Ich versuche, das unten stehende Stück HTML zu stylen.

<code><body>
  <section id="content">
    <article>
      <ul class="posts-list">
        <li class="post-item">
          <h2>[post title]</h2>
          <p class="item-description">...</p>
          <p class="item-meta">...</p>
        </li>
        ...
      </ul>
    </article>
  </section>
</body>
</code>

Da sich der Inhalt des Abschnitts # auf jeder meiner Seiten ändert, wollte ich konsistente Stile für alle Seiten beibehalten. Deshalb habe ich einige "globale" CSS-Regeln geschrieben.

<code>#content {
  color: #000;
  margin-left: 300px;
  max-width: 620px;
  padding: 0px 10px;
  position: relative;
}

#content p,
#content li {
  color: #111;
  font: 16px / 24px serif;
}
</code>

Ich wollte HTML innerhalb einesul.posts-list anders, also schrieb ich diese Regeln.

<code>li.post-item > * {
  margin: 0px;
}

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}
</code>

Ich bin jedoch auf einige Probleme gestoßen. So rendert Chrome das CSS:

Aus irgendeinem Grund gelten die Regeln#content p, #content li überschreiben meine Regeln für.item-description und.item-meta. Mein Eindruck war, dass Klassen- / ID-Namen als spezifisch angesehen werden und daher eine höhere Priorität haben. Es scheint jedoch, dass ich ein Missverständnis darüber habe, wie CSS funktioniert. Was mache ich hier falsch?

Bearbeiten: Wo kann ich mehr darüber erfahren, wie diese Hierarchie funktioniert?