title: Why are my CSS properties being overridden/ignored?
body: <p>I'm having some issues with the CSS "hierarchy" (not sure if it's proper to call it a hierarchy). I'm trying to style the below bit of HTML.</p>
  
  <pre><code>&lt;body&gt;
    &lt;section id="content"&gt;
      &lt;article&gt;
        &lt;ul class="posts-list"&gt;
          &lt;li class="post-item"&gt;
            &lt;h2&gt;[post title]&lt;/h2&gt;
            &lt;p class="item-description"&gt;...&lt;/p&gt;
            &lt;p class="item-meta"&gt;...&lt;/p&gt;
          &lt;/li&gt;
          ...
        &lt;/ul&gt;
      &lt;/article&gt;
    &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Since section#content changes on every page I have, I wanted to maintain consistent styles across all of them, so I wrote some "global" CSS rules.</p>
  
  <pre><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></pre>
  
  <p>I wanted to style HTML within a <code>ul.posts-list</code> differently, so I wrote these rules.</p>
  
  <pre><code>li.post-item &gt; * {
    margin: 0px;
  }
  
  .item-description {
    color: #FFF;
  }
  
  .item-meta {
    color: #666;
  }
  </code></pre>
  
  <p>However, I ran into some issues. Here is how Chrome is rendering the CSS:</p>
  
  <p><img src="https://i.stack.imgur.com/NSQzG.png" alt="Screenshot of how Chrome is rendering my CSS"></p>
  
  <p>For some reason, the rules <code>#content p, #content li</code> are overriding my rules for <code>.item-description</code> and <code>.item-meta</code>. My impression was that class/id names are considered specific and thus higher priority. However, it seems that I have a misunderstanding of how CSS works. What am I doing wrong here?</p>
  
  <p>Edit: Also, where can I read up more about how this hierarchy works?</p>