Ignore element wrapper's CSS

Let's say I have two divs like this:

<div name="parent" style="color:blue;padding:5px">
  <div name="child" style="background:red">
    Text that ignores color:blue and padding:5px, but still obeys background:red.
  </div>
</div>

I want the text in the div named child to ignore all css that is not defined by child. I know I can do this by defining every css option available to default, but that would be very bulky for my cur开发者_JAVA百科rent project. I don't want to use iframes either. How can I do this? Thanks.

The "C" in CSS = "cascading", which means elements inherit properties from their parents.

You might be able to write some script to help automate this, but you really do need to overwrite the parent's properties. That's the way CSS works.

P.S. you should be using IDs and classes, not "name".

I know I can do this by defining every css option available to default, but that would be very bulky for my current project.

Unfortunately for you, that's what has to be done:

<div name="parent" style="color:blue;padding:5px">
  <div name="child" style="background:red;color:#000">
    Text that ignores color:blue and padding:5px, but still obeys background:red.
  </div>
</div>

padding is not inheritable, so you don't need to reset that. Check the "Inherited" column here to see which you need to reset: http://www.w3.org/TR/CSS21/propidx.html