gpt4 book ai didi

css - 为什么我的 CSS 属性被覆盖/忽略?

转载 作者:技术小花猫 更新时间:2023-10-29 10:19:41 24 4
gpt4 key购买 nike

我在 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 的方式:

Screenshot of how Chrome is rendering my CSS

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

编辑:此外,我在哪里可以阅读更多有关此层次结构如何工作的信息?

最佳答案

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

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

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

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

基本上 id 优先于类优先于标签(p,li,ul,h1 ...)。要覆盖规则,只需确保您拥有优先权;)

关于css - 为什么我的 CSS 属性被覆盖/忽略?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10442670/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com