Question

我对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;
}

我希望以ul.posts-list的方式对HTML进行不同的设置，因此我编写了这些规则。

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

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}

然而，我遇到了一些问题。以下是Chrome渲染CSS的方式：

Screenshot of how Chrome is rendering my CSS

出于某种原因，规则#content p, #content li会覆盖我对.item-description和.item-meta的规则。我的印象是，class / id名称被认为是特定的，因此具有更高的优先级。但是，似乎我对CSS的工作原理有误解。我在这里做错了什么？

编辑：另外，我在哪里可以阅读有关此层次结构如何工作的更多信息？

Answer 1

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

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

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

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

基本上id优先于class上的优先级（p，li，ul，h1 ......）。要覆盖规则，只需确保您具有优先级;）

Answer 2

测量CSS规则的“层次结构”称为特异性。 CSS规则的每个部分都有一个实际的数字基数为10的值。 ID为100，而类只有10。

有关详细信息，请参阅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

我的回答应该是＆＃34;评论＆＃34;在答案上，但我有正确的解决方法虽然#tibo回答正确：

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

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

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

!important规则将覆盖id和class之间的评估顺序。

这是指向文章When Using !important is The Right Choice的链接，可以帮助您理解......它让我的生活更轻松：）

Answer 5

最好遵循CSS标准。选择css选择器和makeit在其父级下，然后你可能不会在加载css文件时遇到冲突（如.css文件）

为什么我的CSS属性被覆盖/忽略？

5 个答案: