为什么我的 CSS 属性被覆盖/忽略？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10442670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why are my CSS properties being overridden/ignored?
提问by kibibyte
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.
我在 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>
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.
由于 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;
}
I wanted to style HTML within a ul.posts-listdifferently, so I wrote these rules.
我想以ul.posts-list不同的方式设置 HTML 样式，因此我编写了这些规则。
li.post-item > * {
margin: 0px;
}
.item-description {
color: #FFF;
}
.item-meta {
color: #666;
}
However, I ran into some issues. Here is how Chrome is rendering the CSS:
但是，我遇到了一些问题。以下是 Chrome 呈现 CSS 的方式：
For some reason, the rules #content p, #content liare overriding my rules for .item-descriptionand .item-meta. 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?
出于某种原因，这些规则#content p, #content li覆盖了我对.item-description和 的规则.item-meta。我的印象是 class/id 名称被认为是特定的，因此具有更高的优先级。但是，我似乎对 CSS 的工作方式有误解。我在这里做错了什么？
Edit: Also, where can I read up more about how this hierarchy works?
编辑：另外，我在哪里可以阅读有关此层次结构如何工作的更多信息？
回答by tibo
Elements id have the priority in CSS since they are the most specific. You just have to use the id:
元素 id 在 CSS 中具有优先级，因为它们是最具体的。你只需要使用 id：
#content li.post-item > * {
margin: 0px;
}
#content .item-description {
color: #FFF;
}
#content .item-meta {
color: #666;
}
Basically id have the priority on class which the priority on tags(p,li,ul, h1...). To override the rule, just make sure you have the priority ;)
基本上 id 具有优先级的优先级，优先级优先于标签（p，li，ul，h1 ...）。要覆盖规则，只需确保您拥有优先权；)
回答by jaredhoyt
The "hierarchy" in which CSS rules are measured is called specificity. Each part of a CSS rule has an actual numerical base-10 value. IDs are worth 100 while classes are only 10.
衡量 CSS 规则的“层次结构”称为特异性。CSS 规则的每个部分都有一个实际的以 10 为底的数值。ID 值 100，而类只有 10。
For more information see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
有关更多信息，请参阅http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
回答by Pupchuck
Targeting ID's is more specific than targeting classes. More specific styling will overwrite less specific styling. It should be noted that in-line styling in HTML is more specific and will therefore overwrite ID-targeted styling. In other words:
定位 ID 比定位类别更具体。更具体的样式将覆盖不太具体的样式。应该注意的是，HTML 中的内联样式更具体，因此会覆盖 ID 目标样式。换句话说：
<p style="color:white" id="itemDescId" class="item-description">...</p>
With the CSS:
使用 CSS：
p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}
The text will appear white - not because it's closest to the html code, but because it's higher in the specificity hierarchy. If you remove the inline styling (and you normally should for cleaner more manageable code), then the text would become red. Remove the ID and it will be green. And finally it will be blue once the class is removed.
文本将显示为白色 - 不是因为它最接近 html 代码，而是因为它在特异性层次结构中更高。如果您删除内联样式（并且您通常应该为更清晰更易于管理的代码），那么文本将变为红色。删除ID，它将是绿色的。最后，一旦类被删除，它就会变成蓝色。
This is one of the more complex topics to understand in CSS, and I'm only scratching the surface, but the easiest description I've found on how CSS specificity works is over at CSS tricks:
这是 CSS 中需要理解的更复杂的主题之一，我只是触及了表面，但我发现的关于 CSS 特异性如何工作的最简单的描述已经在 CSS 技巧上结束了：
回答by James Walker
My response should have been a "comment" on the answer, but I have the correct fix although #tibo answered correctly:
我的回答应该是对答案的“评论”，但我有正确的解决方法，尽管 #tibo 回答正确：
li.post-item > * {
margin: 0px !important;
}
.item-description {
color: #FFF !important;
}
.item-meta {
color: #666 !important;
}
The !importantrule will override the order of evaluation between id and class.
该!important规则将覆盖 id 和 class 之间的评估顺序。
Here is a link to an article, When Using !important is The Right Choice, that will help you to understand... it made my life easier :)
这是一篇文章的链接，When Using !important is The Right Choice，它将帮助您理解...它使我的生活更轻松:)
回答by Chowdeswara Rao
Better to follow the CSS standards. choose css selector and makeit under its parent then u may not to get conflicts when loading css fles (like .css files)
最好遵循 CSS 标准。选择 css 选择器并在其父项下创建它，那么在加载 css 文件（如 .css 文件）时您可能不会发生冲突
