logo标签列表

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

csscss-selectors
19

我在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-description 和 .item-meta 规则。我印象中类名 / ID 名被认为是特定的，因此具有更高的优先级。然而，似乎我对 CSS 工作方式的理解存在误解。我做错了什么？
编辑：我在哪里可以阅读更多关于这种层次结构的知识？
5个回答
31

在CSS中，元素的ID具有最高优先级，因为它们是最具体的。 您只需使用该ID：

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

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

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

基本上我会优先考虑类别的优先级，然后才是标签（如p、li、ul、h1等）的优先级。如果要覆盖规则，只需确保你有更高的优先级即可 ;)

9
支持代码，但加入一些链接会更好！关于特异度的官方规范和友好的速查表。 - benesch
2
+1 非常友好的备忘单或者“如何向极客解释CSS特异性”！太棒了！ - tibo
7
4

针对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 Tricks上关于CSS特异性如何工作的最简单描述。

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

2

我的回应应该作为对答案的“评论”，但是我有正确的修复方法，尽管 #tibo 的回答也是正确的：

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

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

.item-meta {
  color: #666 !important;
}
< p > !important 规则将覆盖 id 和 class 之间的评估顺序。

这里有一篇文章的链接，当使用!important是正确的选择, 它会帮助你理解...它让我的生活更加轻松 :)

-2
最好遵循CSS标准。 选择CSS选择器并将其置于其父级下，这样在加载CSS文件（如.css文件）时就不会发生冲突。
你能详细说明或提供一个代码示例来解释你的意思吗？我不太明白你在说什么。 - Kmeixner
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接