Question

我有一个如下所示的html页面，dynamicContentDiv正在从数据库加载。某些内容具有样式，此样式也会影响dynamicContentDiv之外的其他元素。有没有办法阻止这种影响？

<body>
    ....
    <div id="dynamicContentDiv">
       ....
       <style>
           <!-- Some CSS Here -->
       </style>
    </div>
</body>

Answer 1

您需要使用#dynamicContentDiv更新选择器，才能在div中进行选择。

#dynamicContentDiv <your_selector> {
  /*... style properties ....*/
}

参考：Descendant combinator

或者，您可以将内容加载到iframe，其中的样式不会影响父页面。

Answer 2

将您想要的内容放入div并仅将css应用于

button {
  font-weight: bold;
}

.inside button {
  color: red;
}

<div class="inside"><button>Inside</button></div>

<button>Out</button>

<div><button>Out</button></div>

Answer 3

您可以将CSS选择器更新为<div>，从而将样式限制为特定的#dynamicContentDiv：

<div id="dynamicContentDiv">
   ....
   <style>
       #dynamicContentDiv{
           // div style
       }
       #dynamicContentDiv input{
           // input style
       }
       #dynamicContentDiv .someClass{
           // generic class under this div
       }
   </style>
</div>

如何仅针对特定区域应用CSS？

3 个答案: