Why doesn't a specific CSS rule override a general one?_问答_开发者

Why doesn't a specific CSS rule override a general one?

开发者 https://www.devze.com 2023-01-16 12:47 出处：网络

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.

相关专题：css styles

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      { 
                        开发者_StackOverflow社区        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!

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

body#inside #content p

will be enough. The fact that the rules come after the general rules will be enough to overwrite them.

There's no #content ID in your HTML.

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/

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.