Resetting and Overrulling CSS under a certain element

Question

I have element that could be injected into any page using a Firefox Addon.

Naturally, it and its ancestors are affected by the CSS rules defined on that page.

I can get so far by simply being explicit about every attribute, but even then my declarations may be overridden by an earlier declaration on the page with greater specificity.

Without making a huge mess of needlessly specific selectors and hanus use of !important, how could I go about resetting all elements' attributes under a given element (div#my_root_container_element) and ensure that my declarations under this parent element apply.

Using an iFrame is one option, but I would rather avoid it if possible - is there another way? Given the application, solutions need only work in Firefox.

Thanks.

Answer 1

Using SASS, it's not too unpalatable nesting everything under a div with an ID to achieve sufficient specificity, which is the solution I've opted for.

That said, any !important declaration made in the page CSS will overrule my styles.