为什么特定的 CSS 规则不会覆盖通用的规则？
作者的编辑：很抱歉对此造成困惑。我将路径更改为另一个文件夹并正在读取旧文件！我的错。感谢您的所有帮助。
我的理解是，如果您将特定规则放置在 CSS 中的通用规则之下，则特定规则应该覆盖通用规则。例如，在这个正在开发的 页面 上，我有以下代码：
正文 id 是如下：
<body id="inside" class="blog">
<h3><a href="http://dev.extraspecialpatient.com/blog/entry/test-blog-entry/">Test Blog Entry</a></h3>
<p class="entry-date">published September 13, 2010</p>
<p>
This is a test of the American Broadcasting System to see if my entry shows up properly on the website. Summary information goes here.</p>
<p>Sentence two.</p>
<p>Sentence three.</p>
这是此内容的通用样式：
body#inside #content p {
margin: 0;
padding: 0 0 20px 20px;
color: #000;
font: 14px/22px "Myriad Pro", Arial, sans-serif;
}
我需要修改段落上的填充并设置日期信息的样式，因此在其下方我放置了以下内容：
body#inside.blog #content p { padding: 0 20px 10px 20px; }
body#inside.blog #content p.entry-date {
font-size: 11px;
color: #4d6b53;
font-style: italic;
margin: -3px 0 0 20px;
padding: 0;
}
我希望得到一些帮助来解决此问题。
谢谢！
Author's edit: sorry for the confusion on this. I changed the path to another folder and was reading from the old files! My fault. Thanks for all the help.
My understanding is that if you place a specific rule underneath a general rule in CSS, the specific one should override the general one. For example, on this page which is in development, I have the following code:
The body id is as follows:
<body id="inside" class="blog">
<h3><a href="http://dev.extraspecialpatient.com/blog/entry/test-blog-entry/">Test Blog Entry</a></h3>
<p class="entry-date">published September 13, 2010</p>
<p>
This is a test of the American Broadcasting System to see if my entry shows up properly on the website. Summary information goes here.</p>
<p>Sentence two.</p>
<p>Sentence three.</p>
Here is the generic styling for this content:
body#inside #content p {
margin: 0;
padding: 0 0 20px 20px;
color: #000;
font: 14px/22px "Myriad Pro", Arial, sans-serif;
}
I need to modify the padding on the paragraph and style the date information so beneath this I placed the following:
body#inside.blog #content p { padding: 0 20px 10px 20px; }
body#inside.blog #content p.entry-date {
font-size: 11px;
color: #4d6b53;
font-style: italic;
margin: -3px 0 0 20px;
padding: 0;
}
I would appreciate some help getting this worked out.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
当您说
body#inside.blog #content p时，这意味着“ap 是 id 'content' 的某个内容的后代，该内容是 id 'inside' 和 class ' 的正文的后代blog'”CSS 未显示，因为 body 标记内没有任何内容具有 id 'content'。
When you say
body#inside.blog #content p, that means "a p that is a descendant of something with the id 'content' that is a descendant of a body with id 'inside' and class 'blog'"The CSS isn't showing up because nothing has the id 'content' inside the body tag.
使用 firefox -firebug 插件并检查当前在元素上应用了哪些 CSS。它将清楚地显示哪些样式被哪些样式表覆盖。
从这里获取 firebug http://getfirebug.com/
Use firefox -firebug plugin and check which CSS is currently applied on the element.It will clearly shows which styles are overridden from which stylesheets.
Get firebug from here http://getfirebug.com/
您的 HTML 中没有
#contentID。There's no
#contentID in your HTML.我看不到您上面引用的更具体的规则，也看不到您的 CSS 文件也不在 HTML 文档中。我是否忽略了什么？您可能忘记上传它们。
此外，没有必要比一般规则更具体：使用
就足够了。事实上，规则在一般规则之后就足以覆盖它们。
I can't see the more specific rules you quote above, neither in your CSS file nor in the HTML document. Am I overlooking something? You may have forgotten to upload them.
Also, it should not be necessary to be more specific than the general rule: Using
will be enough. The fact that the rules come after the general rules will be enough to overwrite them.