我们在现有的.net MVC应用程序中构建了一个Vue组件(使用vuetify(。应用程序将Web包加载到div中。问题是vue组件继承了现有应用程序的所有CSS。简化的HTML版本如下所示：
<html>
<head>
</head>
<body>
...
<div class="VUE_CLASS">
//vue component...
</div>
...
</body>
</html>
样式是用css.less.编写的
我试图通过应用:not(.VUE_CLASS)和div:not(.VUE_CLASS)将VUE_CLASS从现有应用程序的所有CSS规则中排除。我还试图将其包装在css.less中的所有规则中：
*:not(.VUE_CLASS){
//...css rules of the existing application
}
不起作用
我读到一些其他策略(https://kloudless.com/blog/2019/02/05/creating-a-reusable-vuetify-component-to-use-in-other-apps/)。使用iframe不是一个选项，因为我们无法从iframe访问备份。我也不能使用Web组件，因为我们必须支持ie11。
是否可以使用较少的元素来排除div及其所有子元素？
谢谢&致问候，
Finn
如果您只是重置VUE_CLASS选择器的所有CSS样式呢？
尝试在<style>标签末尾添加以下规则：
.VUE_CLASS {
all: unset !important;
/* Write the other styles for this component below */
}