如何避免CSS对动态添加的类的影响

Question

What actually happens : I have a div in a file there is HTML code, which added Dynamically from BackEnd, CSS Classes(which included from Dynamic code) uses CSS from my style.css

What I need : My own CSS should not impact on dynamically added code.

Similar Solution : iframe is a solution but I want to do same using div tag.

Answer 1

我认为这是：

<div class="row" style="all:initial"> do some thing</div>

Answer 2

Better you can write you css with parent-child combination to avoid such issues as like below snippet. Here newly added <p> tag has same class .content but parent has different class name as .dynamic from .static .

 jQuery(document).ready(function() { jQuery('.dynamic').html(jQuery(".static").html()); }); 

 .static .content { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="static"> <p class="content">Some content goes here</p> </div> <div class="dynamic"> </div> 

Answer 3

Three options from my perspective:

1. Use unique classnames

2. Unique ID

If only classes are added, give the parent div an ID and overwrite the css by using the ID.

<div id="uniqueStyle" class="dynamicDiv">
    <div class="row clearfix"></div>
    <div class="row clearfix"></div>
    <div class="row clearfix"></div>
    <div class="row clearfix"></div>
</div>

#uniqueStyle{
 background: red; //overwrite
}

#uniqueStyle .row{
background: blue; //overwrite
}

3. Using :not

Give the div an unique ID and use the :not selector to exclude it from styling.

<div id="noStyling" class="dynamicDiv">
   <div class="row clearfix"></div>
   <div class="row clearfix"></div>
   <div class="row clearfix"></div>
   <div class="row clearfix"></div>
</div>

:not(#noStyling){
   background: blue; //set styling of all elements except #noStyling
}

More info about :not selector: https://www.w3schools.com/cssref/sel_not.asp