How To Isolate a div from public CSS styles?

Question

i have some code for example here in html

 
  
  
Hi it\'s test
  


        
                      

              相关标签:
       
      

Answer 1

You cannot technically, that's how CSS is suppose to work. If there is any style defined for div tag in your style sheet it will be applied to all div elements.

Few things that you can try is don't style with tag name instead give class name and give style declaration to class. so that you can make sure where all styles will go.

OR. if you want some specific Div tag to not have the style while other Divs to have. you can always reset it give some different class name or id and reset the style declarations

Answer 2

One thing that might be helpful is the CSS direct child selector, which is available in all browsers including IE7+. That lets you apply styling that doesn't cascade down into children. For example in your code you could use this CSS:

body > img {
  width:100px;
  height:100px;
}
body > h1 {
  font-size:26px;
  color:red;
}

And that CSS would only apply to elements directly on the BODY element.

Answer 3

CSS Cascading and Inheritance Level 3 introduces the all shorthand property and the unset keyword, which, together, allow you to achieve this conveniently.

For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.

This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.

You’ll need to apply all: initial to your div and all: unset to its descendants:

#mydiv {
  all: initial; /* blocking inheritance for all properties */
}
#mydiv * {
  all: unset; /* allowing inheritance within #mydiv */
}

You may want to use a class on your div instead of an id, so that any rules you write to style its descendants won’t have to match or beat the high specificity used in this rule.

To be really safe, you may want to block styles on potential pseudo-element descendants too:

#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
  all: unset;
}

Alternatively, for broader browser support, you can manually attempt to do what all does by setting all known CSS properties (don’t forget the prefixed versions):

#mydiv {
  /*
   * using initial for all properties
   * to totally block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  alignment-baseline: initial;
  animation: initial;
  backface-visibility: initial;
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * using inherit for normally heritable properties,
   * and initial for the others, as unset does
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}

You can encourage browser support for the all shorthand property and track its adoption with these issue links:

• ☑ Chrome 37+
• ☑ Firefox 27+
• ☑ Webkit (Safari 9.1+)
• ☐ Internet Explorer
• ☑ Edge 79+
• ☑ Opera 24+

Up-to-date browser support information for the all shorthand property is available here.

Answer 4

iframe is also a decent solution for isolation of styles if it doesn't complicate other business logic. Plus this can be done in pure JavaScript and may work in older browsers too.

const HTMLToIsolate = `...` // get your div tag as HTML string
const parentContainerRef = document.body; // or something else
const newIframe = document.createElement('iframe');
// set height & width to 100% and remove borders for newIframe

parentContainerRef.appendChild(newIframe)
newIframe.contentWindow.document.open('text/html', 'replace');
newIframe.contentWindow.document.write(HTMLToIsolate);
newIframe.contentWindow.document.close();

// bonus to remove scroll bars by setting proper iframe's height
newIframe.addEventListener('load', function onIFrameLoad(e) {
    const iframeBody = this.contentDocument.querySelector("body");
    this.style.height = `${iframeBody.scrollHeight}px`;
});

This worked perfectly for me when I had to embed a complex HTML file into my webpage fetched remotely without MixedContent warning and without parent HTML styles overriding the embedded HTML. Thanks to https://benfrain.com/sandbox-local-htmlcss-code-snippets-inside-iframe-style-guidespattern-libraries/ for this excellent idea!

Though #mydiv * { all: unset } CSS trick, as suggested in the accepted solution here works, it ended being a complex browser operation as there were many DOM nodes on my page.

Answer 5

Old question, but things have changed a little bit since the accepted answer. There is now a CSSWG-recommended keyword called revert which would be better suited than initial and unset to solve this problem, as it resets an element's property to the value defined in the user agent stylesheet rather than the initial value of the property regardless of which element it's used on. So for instance, a div inside #mydiv will have its display set to block as we would expect and not inline.

You'd have to do this:

#mydiv,
#mydiv::before,
#mydiv::after,
#mydiv *
#mydiv *::before,
#mydiv *::after {
  all: revert;
}

Unfortunately, revert is not supported by any browser other than Safari (for Mac and iOS) at the time of writing.

There is also something else to take in consideration regarding the accepted answer. If you want to style anything inside #mydiv, you need to do so with a selector that is at least as specific as the one you used to unset or revert everything, otherwise it will be overridden by that rule, even if it comes after it in the CSS.

So you'd need to do something like this (note the #mydiv which boost the specificity of the rules):

#mydiv p {
  margin-top: 20px;
}

#mydiv .bg-black {
  background-color: black;
}

// etc.