CSS Inheritance not working as expected

So I have html and css that looks like the following..

    <div id="foo">
        <p> Foo text </p>
        <div id="bar">
            <p> Bar text </p>
        </div>
    </div>

And then I have some css that looks like the following...

    #foo p {
    text-align:left;
    font-family: helvetica, verdana, sans;
    font-size: 14px开发者_运维百科;
    color: #000000;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 0px 0px;
    }
    #bar p {
    font-size: 12px;
    color: #ffffff;
    padding: 0px 0px 0px 0px;
    }

So isn't the point of CSS to override the styles applied to the child from the parent foo? It's not doing this, I just get the child styles overridden by the parent. I'm clearly missing something big here, any help would be great.

I think you're confused, or have coded yourself blind. :) What you have works perfectly well, it is your intentions that I suspect is off. What you're thinking is that the first set of styles should be inherited and then overwritten by the second, but if you look to your HTML, that's not the structure you've put in place.

You're saying #foo's <p>'s should have the first style, but the second set of styles are in a <div>, and hence not applied. The second p is in a <div>, and hence will not have the first rules which are for elements under a <p>.

If you want the styles to inherit, wrap your <div> into your <p> (even though structurally not good, nor valid in a number of schemas);

<div id="foo">
        <p> Foo text 
        <div id="bar">
            <p> Bar text </p>
        </div>
    </p>
</div>

I'm not sure what you're trying to do, though, so it's a bit hard to come up with good examples to solve your problem. :)

Look Chris you're misunderstanding CSS selectors and their inheritance ...

Nothing will explain it better than this presentation by Russ Weakly

CSS Cascade