情境

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

我不希望我的innerDiv被externalDiv中的CSS修改。
有什么办法可以做到这一点?

(通过ajax调用加载InnerDiv的content(HTML),并且结果页面已经具有其自己的CSS,并且两个CSS文件都将所有布局和格式弄乱了)

最佳答案

previous answer:Edge不支持all: initial(Safari终于可以了)


因此,如果您确实确实希望确定(hundred of properties。
您可以(应该)添加!important修饰符(这是不可能以其他方式完成的情况之一……至少对我来说很好)
您还可以通过向组件的父级添加ID并为每个选择器添加该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; }。当您需要添加“足够的”特异性时,在一个理智的项目中可以想象到的最糟糕的事情也是一种强大的工具。


值得深思:通过在:root上设置box-sizing然后让继承完成其工作来设置的现代方法可能有帮助(或没有作用)https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
优点:如果在后代上设置了另一个值,则后代的后代将从其继承。现在,您有整个DOM的一部分从另一个值继承。

09-30 15:20
查看更多