Dlaczego moje właściwości CSS są nadpisywane / ignorowane?

Question

May 04, 2012, 06:20 AM

Dlaczego moje właściwości CSS są nadpisywane / ignorowane?

Mam pewne problemy z „hierarchią” CSS (nie jestem pewien, czy należy nazwać to hierarchią). Próbuję stylizować poniższy bit HTML.

<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>

Ponieważ zmiany sekcji # na każdej stronie mam, chciałem zachować spójne style we wszystkich z nich, więc napisałem kilka „globalnych” reguł CSS.

<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>

Chciałem nadać HTML stylul.posts-list inaczej, więc napisałem te zasady.

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

.item-description {
  color: #FFF;
}

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

Wpadłem jednak na pewne problemy. Oto jak Chrome renderuje CSS:

Z jakiegoś powodu zasady#content p, #content li nadpisują moje zasady.item-description i.item-meta. Miałem wrażenie, że nazwy klas / identyfikatorów są uważane za konkretne, a zatem wyższy priorytet. Wydaje się jednak, że nie rozumiem, jak działa CSS. Co ja tu robię źle?

Edycja: Ponadto, gdzie mogę przeczytać więcej o tym, jak działa ta hierarchia?