16

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

由于我拥有的每个页面上的 section#content 都会发生变化，因此我想在所有页面上保持一致的样式，因此我编写了一些“全局”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 的方式：

Chrome 如何呈现我的 CSS 的屏幕截图

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

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

4

5 回答 5

30

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

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

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

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

基本上 id 优先于标签（p，li，ul，h1 ...）的优先级。要覆盖规则，只需确保您拥有优先权；）

于 2012-05-04T04:24:00.527 回答
6

衡量 CSS 规则的“层次结构”称为特异性。CSS 规则的每个部分都有一个实际的以 10 为底的数值。ID值100，而班级只有10。

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

于 2012-05-04T04:24:39.370 回答
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/

于 2014-07-27T21:35:31.593 回答
1

我的回答应该是对答案的“评论”，但尽管#tibo 回答正确，但我有正确的解决方法：

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

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

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

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

这是一篇文章的链接，当使用 !important 是正确的选择时，它将帮助您理解......它让我的生活更轻松:)

于 2015-10-28T04:35:41.493 回答
-2

最好遵循 CSS 标准。选择 css 选择器并在其父级下制作它，那么您在加载 css 文件（如 .css 文件）时可能不会发生冲突

于 2016-03-21T18:58:16.937 回答