为什么我的CSS属性被覆盖/忽略? [英] Why are my CSS properties being overridden/ignored?
问题描述
我有一些问题与CSS层次结构(不确定如果它是适当的称为层次结构)。我试图对下面的HTML进行样式。
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.
<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#内容在每个页面上都有变化,我想在所有页面中保持一致的样式,因此我写了一些全局CSS规则。
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.
#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
,所以我写了这些规则。
I wanted to style HTML within a ul.posts-list
differently, so I wrote these rules.
li.post-item > * {
margin: 0px;
}
.item-description {
color: #FFF;
}
.item-meta {
color: #666;
}
但是,我遇到了一些问题。下面是Chrome如何渲染CSS:
However, I ran into some issues. Here is how Chrome is rendering the CSS:
由于某种原因,规则 #content p,#content li
覆盖我的 .item-description
和 .item-meta
的规则。我的印象是class / id名称被认为是具体的,因此更高的优先级。但是,似乎我对CSS的工作原理有误解。
For some reason, the rules #content p, #content li
are overriding my rules for .item-description
and .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?
Also, where can I read up more about how this hierarchy works?
推荐答案
元素id在CSS中具有优先级,因为它们是最具体的。
您只需使用id:
Elements id have the priority in CSS since they are the most specific. You just have to use the id:
#content li.post-item > * {
margin: 0px;
}
#content .item-description {
color: #FFF;
}
#content .item-meta {
color: #666;
}
基本上,id在类上具有标签优先级的优先级,ul,h1 ...)。要覆盖该规则,只需确保您具有优先级;)
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 ;)
这篇关于为什么我的CSS属性被覆盖/忽略?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!