为什么我的CSS属性被覆盖/忽略？
kib*_*yte 15 css css-selectors
我对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的方式:
出于某种原因,规则#content p, #content li要重写我的规则.item-description和.item-meta.我的印象是,class/id名称被认为是特定的,因此具有更高的优先级.但是,似乎我对CSS的工作原理有误解.我在这做错了什么？
编辑:另外,我在哪里可以阅读有关此层次结构如何工作的更多信息？
tib*_*ibo 27
元素id在CSS中具有优先级,因为它们是最具体的.你只需要使用id:
#content li.post-item > * {
margin: 0px;
}
#content .item-description {
color: #FFF;
}
#content .item-meta {
color: #666;
}
基本上id在类上具有优先级,标签上的优先级(p,li,ul,h1 ......).要覆盖规则,只需确保您具有优先级;)
- 代码为+1,但有些链接不会受到伤害和[友好的备忘单](http://www.stuffandnonsense.co.uk/archives/images/ specificitywars-05v2.jpg) (8认同)
测量CSS规则的"层次结构"称为特异性.CSS规则的每个部分都有一个实际的数字基数为10的值.ID值为100,而类只有10.
有关更多信息,请参阅http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
| 归档时间： |
|
| 查看次数： |
28964 次 |
| 最近记录： |