CSS: Clear othe styles in Live Preview
I have a div LivePreview that previews the text entered into a textarea as HTML using jQuery. The problem is, it inherits all the other styles on the page, as it should...
Is there a way to clear all styles for just the LivePreview (table, p, etc...) or will I have to reset 开发者_StackOverflow中文版each of the LivePreview children manually?
The way to do it is as done in jsfiddle itself which does a similar thing to what you want. The way they seem to have doe it is put that box within an iframe.
Anything nested within the iframe loses any CSS that has been called out of it unless the CSS file is explicitly linked to from within the `iframe. So your code should be:
<div class="LivePreview">
<iframe>
<head></head>
<body>
/* Any HTML you want and will have the default CSS*/
</body>
</iframe>
</div>
You could, at the beginning of the CSS file, add:
*#LivePreview {
margin: 0px;
padding: 0px;
/*Any styles that might otherwise be overwritten*/
}
*#LivePreview * { }
Anything specified by id "livepreview" should have only those styles associated, nothing inherited.
加载中,请稍侯......
精彩评论