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

Question

实际发生的事情：我在文件中有一个div，其中有HTML代码，它从BackEnd动态添加，CSS类（包含在动态代码中）使用我的{ {1}}

我需要什么：我自己的CSS不应该影响动态添加的代码。

类似解决方案：style.css是一种解决方案，但我想使用iframe代码执行此操作。

Answer 1

我认为这是：

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

Answer 2

最好你可以用父子组合写css，以避免像下面的代码片段这样的问题。此处新添加的<p>代码具有相同的类.content，但父代与.dynamic中的.static具有不同的类名。

＆＃13;

＆＃13;

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

＆＃13;

.static .content {
  color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

从我的角度来看有三个选择：

<强> 1。使用唯一的类名

<强> 2。唯一ID

如果只添加了类，请为父div提供一个ID，并使用该ID覆盖css。

<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。使用：不

为div提供唯一ID，并使用：not selector将其从样式中排除。

<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
}

有关更多信息：not selector：https://www.w3schools.com/cssref/sel_not.asp