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.
我认为这是:
<div class="row" style="all:initial"> do some thing</div>
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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.