css shield for widget

I'm creating a bookmarklet. It will displa开发者_运维问答y a widget on page. However, some existing css on page can effect to my widget. How to avoid this? I don't want to use iframe.

Use a localised reset.

Take an existing CSS reset (or roll your own), and namespace it by putting your widget's id (or class) in front of it.

Example

HTML

<div id="my-bookmarklet-panel">...</div>

CSS

#my-bookmarklet-panel a,
#my-bookmarklet-panel div,
#my-bookmarklet-panel span {
    /* Reset rules */
}

make use of the !important statement in our widget CSS to protect your rules from overriding.