Ignore document style rules in one element

I write a greasemonkey script that adds sticky notes to websites. Because there sometimes are pretty strange style rules used in some websites the sticky notes sometimes turn up messed up (or at least not looking like I want them to look).

Is there a way to say "under this element do not apply any generic stylerules"? So that rules associated with tag names ar开发者_运维百科e not applied, but rules associated with certain classes and ids still are. Or does anyone have a better idea on how to ensure that only my styles are applied to the sticky notes?

---

AFAIK, that's not really possible.

In stead, you have to make sure you define every style you want manually. Don't rely on defaults. If you select your elements by I'd, they get high priority.

---

Have you tried the "!important" keyword?

It overrides the CSS inheritance hierarchy.

---

This sounds like simply a css specificity issue to me, is it not? It seems like you should just make your css rules more specific, and resilient (don't relay on existing rules, expect defaults to be changed and write the rules that you need).

Here are some links to read up on css specificity:

• http://reference.sitepoint.com/css/specificity

• http://css-tricks.com/specifics-on-css-specificity/

---

It is indeed a specificity issue. I imagine that you have your sticky notes in a single div#stickyContainer element, in which case you should apply overriding CSS properties to elements by the fact they belong within that element, and ensure that you reset everything.

That is to say, within div#stickContainer div.sticky { ... } make sure that you set every CSS property to what you would like it to be, even if you're just setting them to a typical browser default, and include the !important keyword following each directive.

---

Put the code you want to exempt from the page's CSS rules in a separate document and use <iframe src='[location]' />. This is what we do for HTML examples in blog posts.