为什么我的CSS属性被重写/忽略？(Why are my CSS properties being

我在与CSS的“层级”（不知道这是否是正确的叫它层次）的一些问题。我想样式的HTML的下方位。

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

因为每一页我有一节内容＃变化，我想保持在所有这些一致的风格，所以我写了一些“全球性”的CSS规则。

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

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

我想风格的HTML一个内ul.posts-list不同，所以我写了这些规则。

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

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}

但是，我遇到了一些问题。这是Chrome的渲染CSS：

出于某种原因，规则#content p, #content li要重写我的规则.item-description和.item-meta 。我的印象是，类/ ID名称被认为是特定的，因此更高的优先级。然而，似乎我的CSS是如何工作的误解。我在做什么错在这里？

编辑：另外，我在哪里可以阅读更多的关于这个层次是如何工作的？

Answer 1:

元素ID在CSS的优先级，因为他们是最具体的。你只需要使用id：

#content li.post-item > * {
  margin: 0px;
}

#content .item-description {
  color: #FFF;
}

#content .item-meta {
  color: #666;
}

基本上ID对类的优先级，其标签上的优先级（P，李，UL，H1 ...）。要覆盖规则，只要确保你有优先权;）

Answer 2:

在CSS规则测量的“层次”之称的特异性。 CSS规则的每个部分都有一个实际的数值基础-10值。而班只有10个ID是价值100。

欲了解更多信息，请参阅http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 3:

定位ID的比靶向类更具体。更具体的造型将覆盖不太具体的造型。应当指出的是，在网上造型在HTML更为具体，因此将覆盖ID针对性的造型。换一种说法：

<p style="color:white" id="itemDescId" class="item-description">...</p>

随着CSS：

p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}

文本将显示白色 - 不是因为它最接近的是对HTML代码，而是因为它在特异性层次更高。如果删除内嵌样式（你通常应该更清洁更容易管理的代码），则文本会变为红色。删除ID，这将是绿色的。最后，一旦类被删除这将是蓝色。

这是比较复杂的话题CSS了解一个，而我只是表面，但我对CSS具体是如何工作中发现的最简单的描述是，在以上CSS技巧：

http://css-tricks.com/specifics-on-css-specificity/

Answer 4:

更好地遵循CSS标准。选择CSS选择器和其母公司在makeit那么U可以不要让冲突时加载CSS FLES（如.css文件）

Answer 5:

我的回答应该是一个对答案“评论”，但我有正确的修复虽然#tibo正确回答：

li.post-item > * {
  margin: 0px !important;
}

.item-description {
  color: #FFF !important;
}

.item-meta {
  color: #666 !important;
}

该!important规则将覆盖ID和类之间的计算顺序。

下面是文章的链接，当使用！重要的是正确的选择，这将有助于你理解......它让我的生活更轻松:)

文章来源: Why are my CSS properties being overridden/ignored?