Question

方案

Visit this link for Code https://plnkr.co/edit/yjGTX0XvOZIqL17Co2MF?p=info

我不希望我的innerDiv被outerDiv中的CSS修改。有没有办法实现这个目标？

（InnerDiv的内容（HTML）通过ajax调用加载，结果页面已经有了自己的CSS，两个CSS文件都搞乱了所有的布局和格式）

Answer 1

您可以覆盖innerdiv中的属性;在这里，我覆盖了outerdiv的背景颜色属性

#outerMostDiv {background-color:red;}
#innerDiv {background-color:yellow;}

<div id="outerMostDiv">
<!-- SOME CSS HERE (say Outer CSS)-->
   outer div
    <div id="innerDiv">
    <!-- some CSS HERE -->
    innerdiv
    </div>
</div>

Answer 2

Edge不支持previous answer：all: initial（Safari终于可以了）

所以你可以手动重置一个hundred of properties，如果你真的真的想要确定（忘记你知道你不使用的最模糊的那些。如果你是第三方，那就没有运气）。
您可以（应该）添加!important修饰符（这是其中一种无法以其他方式执行的情况之一......至少对我来说很好）
您还可以通过向组件的父级添加ID并为每个选择器添加前缀为#myComponent.my-component .my-component-descendant { color: #333 !important; }的前缀，为您的选择器添加大量特异性。如果您现有的CSS已经使用了id（ meh ），您可以更进一步（更低，质量明智）并在单个选择器中多次使用相同的ID。 #myComponent#myComponent#myComponent.my-component .my-component-descendant { color: #333 !important; }。当你需要添加“足够”的特异性时，你在一个理智的项目中可以想象的最令人讨厌的东西也是一个强大的工具。

深思熟虑：通过设置box-sizing来设置from的现代方式：root然后让继承完成其工作可能有用（或不）https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
优点：如果你在后代上设置另一个值，后者的后代将继承它。现在，您的DOM的一部分继承自另一个值。

如何阻止外部CSS修改div

2 个答案: