方案
Visit this link for Code
https://plnkr.co/edit/yjGTX0XvOZIqL17Co2MF?p=info
我不希望我的innerDiv被outerDiv中的CSS修改。 有没有办法实现这个目标?
(InnerDiv的内容(HTML)通过ajax调用加载,结果页面已经有了自己的CSS,两个CSS文件都搞乱了所有的布局和格式)
答案 0 :(得分:0)
您可以覆盖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>
答案 1 :(得分:0)
Edge不支持previous answer:all: initial
(Safari终于可以了)
!important
修饰符(这是其中一种无法以其他方式执行的情况之一......至少对我来说很好)#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的一部分继承自另一个值。