Visual Aids - Inheritance

[rabbithutch]

Firefox is my browser of choice, but I try to look at every CSS style and PHP/HTML document in IE and Op, too.  I've found many extensions to Fx very helpful in understanding what effect(s) individual declarations actually have on what the browser displays.  One I would like to see - but have not yet found - is one that will show what traits are inherited from whence - visually. 

Many times I work on a page, get it close to what I want, yet don't understand why I'm getting the result.  Most often, it's due to not having a clear understanding of what block a particular tag is acting upon.  One way this might be done is for an editor to show selector values that are not heritable in a different color - much the same way most of them show inappropriate values in red (or some other color).  Another would be to have a flyout marker - kinda like a paragraph symbol in Word - that would, on hover, show the parent for that particular element in a preview screen.  There are probably other, better ideas for how to do it, but I sure would like to see a visual representation tying my displayed results to the underlying markup and style information.

Thanks for listening.